返回顶部功能jquery实现代码详解编程语言

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

$(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><em>Back to top</em></a> 
</p> 

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8662.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论