AutoCAD 3DMAX C语言 Pro/E UG JAVA编程 PHP编程 Maya动画 Matlab应用 Android
Photoshop Word Excel flash VB编程 VC编程 Coreldraw SolidWorks A Designer Unity3D
 首页 > JavaScript

js实现返回顶部效果

51自学网 http://www.wanshiok.com
js实现返回顶部,返回顶部效果

话不多说,请看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS点击按钮到页面最底部/返回页面顶部代码</title><style type="text/css"> #back-to-top{ position: fixed; bottom: 50px; right: 10%; }</style></head><body><div style="height: 3000px;"></div><div id="back-to-top"> <a href="#top" rel="external nofollow" >返回顶部</a></div><script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){  //首先将#back-to-top隐藏  $("#back-to-top").hide();  //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失  $(function () {    $(window).scroll(function(){    if ($(window).scrollTop()>100){    $("#back-to-top").fadeIn(100);    }    else    {    $("#back-to-top").fadeOut(100);    }    });    //当点击跳转链接后,回到页面顶部位置    $("#back-to-top").click(function(){    $('body,html').animate({scrollTop:0},"speed");    return false;    });    });    }); </script></body></html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持wanshiok.com!


js实现返回顶部,返回顶部效果  
上一篇:Angular.js基础学习之初始化  下一篇:Vue.directive自定义指令的使用详解