返回返回顶部功能j......登陆

返回顶部功能jquery实现代码

阿神2016-11-08 11:02:18353

当窗口在第一屏时不显示返回顶部,滚动到第二屏是现实返回顶部,点击后平滑滚轮回到顶端

$(document).ready(function() {
 
    // hide #back-top first
    $("#back-top").hide();
 
    // fade in #back-top
    $(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
 
        // scroll body to 0px on click
        $('#back-top a').click(function() {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
 
});
 
HTML USAGE:
 
<p id="back-top" style="display: block; ">
   <a href="#top"><span></span><em>Back to top</em></a>
</p>


最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送