微信小程序代码大全_js完成返回顶部效果

js实现返回顶部效果       本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="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 /div 
 div id="back-to-top" 
 a href="#top" rel="external nofollow" 返回顶部 /a 
 /div 
 script src="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 

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