码迷,mamicode.com
首页 > 其他好文 > 详细

“返回顶部”按钮

时间:2015-07-27 12:33:58      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

实现过程

当页面滚动时(监听scroll事件),浏览器滚动条处于最顶部时,隐藏“返回顶部”按钮,当滚动条继续向下滚动时,动态计算出当前可视窗口的高度-按钮高度-按钮距浏览器下边缘高度得到的值,如果这个值大于某个特定的数字时,显示“返回顶部”按钮,否则隐藏。然后,当单击“返回顶部”按钮时,其实应该是一个链接,将滚动条滚回浏览器最顶部。在这个过程中,我们可以使用animate来创建动画效果,即返回顶部时有个过渡效果。

$(function(){ 
    $(".backToTop").goToTop(); 
    $(window).bind(‘scroll resize‘,function(){ 
        $(".backToTop").goToTop(); 
    }); 
}); 

 

 

var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
            controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
            var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;
            
            if (shouldvisible){
                $this.stop().show();
            }else{
                $this.stop().hide();
            }

 

 http://www.helloweba.com/view-blog-196.html

“返回顶部”按钮

标签:

原文地址:http://www.cnblogs.com/yy2056/p/4679565.html

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