this extension originally is a fork of scrolltop . but the old one is need some more functionality so i fork it from sensorario
KScrollToWidget ' s default behavior is scroll to the top of the document , but you can also set an html tag 's id ,this is why this extension is named scrollTo but scrollTop . this extension is also a yii wrapper of this jquery plugin but add some other functionality .
if you need scroll from some link element to top please check out the original version :scrolltop
...requirements of using this extension ( Yii 1.1 or above)...
first check out this extension and put it to your protected/extensions dir or some orther dir, then just use the path alias to refer it , i don't know you will put it to where but just use path alias of this widget . for me i just put it to my costumized dir .
if you put it to extension dir , you can change the following path alias 'common.widgets.KScrollToWidget' to 'ext.KScrollToWidget' or 'ext.KScrollToWidget.KScrollToWidget' , just depends on your situation , if you don't understand how to use the path alias please refer to http://www.yiiframework.com/doc/api/1.1/YiiBase#getPathOfAlias-detail or some wiki , forum topics to learn how to use yii 's pathOfAlias feature .
you can check it out from github : download it
// in your view file : <div style="height:600px"> click the following there button to see the effects </div> <div id='dest' > the left widget will scroll to here </div> <div style="height:1200px"> click the following there button to see the effects </div> <?php // echo str_repeat('<br/>',65)."\n"; $this->widget('common.widgets.KScrollToWidget',array( 'label' => 'Go on top', 'speed' => 'slow', 'cssSettings'=>array( 'background-color'=> '#78901f', 'width'=>'200px' ) )); <?php $this->widget('common.widgets.KScrollToWidget',array( 'label' => 'toTop2', 'speed' => 2000, 'position'=> 'center', 'dest'=> 100, 'cssSettings'=>array( // 'background-color'=> '#446477' ) )); <?php $this->widget('common.widgets.KScrollToWidget',array( 'label' => 'scroll to the dest div', 'speed' => 200, 'destination' => 'dest' , 'position'=> 'left', 'cssSettings'=>array( 'background-color'=> '#f26077' ) ));
...external resources for this extension...
Total 2 comments
Looks nice however the Demo page link gives a 502 Bad Gateway error
instead of the old one, this is much better... thank you..
Leave a comment
Please login to leave your comment.