js实现返回顶部效果

2019-11-19 17:11:58

字体：大中小

来源：转载

供稿：网友

话不多说，请看代码：

<!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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：Angular.js基础学习之初始化

下一篇：Vue.directive自定义指令的使用详解