码迷,mamicode.com
首页 > Web开发 > 详细

jquery右下角返回顶部

时间:2016-08-22 18:24:01      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

实现的效果也就是,当有滚动条是,滚动条未动或与顶部距离小于多少像素是,返回顶部按钮处于隐身状态,当滚动条与顶部距离大于一定像素时,返回顶部按钮出现,实现点击‘返回按钮’后,从当前位置回到等不位置。要先引用jquery.min.js

<script src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

 

html:

<div id="back-to-top" style="display:none"><br /><br /><br /></div>

css:

  #back-to-top{
       width: 25px;position:fixed;bottom:20px;right:20px;border:solid 1px #ccc;cursor:pointer;text-align: center;color: red;
        _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
        }

js:

jQuery(function ($) {    
        //当滚动条的位置处于距顶部20像素以下时,跳转链接出现,否则消失    
            $(window).scroll(function(){    
                if (jQuery(window).scrollTop()>20){    
                    jQuery("#back-to-top").fadeIn(1000);    
                }    
                else    
                {    
                    jQuery("#back-to-top").fadeOut(1000);    
                }    
            });    
    
            //当点击跳转链接后,回到页面顶部位置    
    
            jQuery("#back-to-top").click(function(){    
                jQuery(‘body,html‘).animate({scrollTop:0},1000);    
                return false;    
            });    
    }); 

 

jquery右下角返回顶部

标签:

原文地址:http://www.cnblogs.com/zhuyefengying/p/5796265.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!