回到顶部和回到底部在当前的网页中应用时相当广泛的
为了更好的体验,我们在回到顶部或回到底部的过程中采用一个渐进的滚动
那么我们就要用到强大的 Jquery 了。具体步骤如下:
1、在压面 body 中的任何地方加入一下代码
1 2 3 4 5 6 7 8 9 10 11 | < div id = "scroll" > < div id = "toTop" class = "scrollItem" > 回到顶部 </ div > < div id = "toBottom" class = "scrollItem" > 回到底部 </ div > </ div > |
在head中加入css
1 2 | # scroll { position : fixed ; top : 300px ; right : 100px ;} .scrollItem { width : 20px ; height : 70px ; border : #e1e1e1 1px solid ; cursor : pointer ; text-align : center ; padding-top : 10px ;} |
当然你也可以定义自己的外观,可以放上一张图片来替代,关键的是保持id与js代码中一致,而且要将滚动导航层的position设置为fixed,这样当我们拖动滚动条的时候,滚动导航层才不会动。
2、引入jqeury库文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type= "text/javascript" > // <![CDATA[ $( function () { var speed = 1000; //自定义滚动速度 //回到顶部 $( "#toTop" ).click( function () { $( "html,body" ).animate({ "scrollTop" : 0 }, speed); }); //回到底部 var windowHeight = parseInt($( "body" ).css( "height" )); //整个页面的高度 $( "#toBottom" ).click( function () { $( "html,body" ).animate({ "scrollTop" : windowHeight }, speed); }); }); // ]]></script> |
在以上的JS代码中,我们可以自定义滚动速度,speed值越大,滚动越快
var speed = 1000;
那么你的页面便实现了回到顶部和底部的功能。
在此我还要多添加一个功能,那就是滑动到指定ID的元素,语法如下。需要把scrollTop设置为
$(‘#ID’).offset().top
如果你是一名站长,你可以将上面的代码放到底部模板(一般是footer.php)中,那么你的网站的所有页面都具备了这样的功能。
下载链接(包含JS文件和demo)
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com