Jquery悬浮backTop代码

最新推荐文章于 2020-06-13 15:25:06 发布

转载最新推荐文章于 2020-06-13 15:25:06 发布 · 211 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HuberyHu/p/5492008.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用jQuery实现的网页回顶按钮效果：当用户向下滚动页面时，回顶按钮逐渐显示；点击该按钮则平滑滚动回页面顶部，并使按钮再次隐藏。此功能提升了用户体验。

 1 $(window).scroll(function () {
 2             if ($(this).scrollTop() != 0) {
 3                 $("#toTop").fadeIn();
 4             } else {
 5                 $("#toTop").fadeOut();
 6             }
 7         });
 8         $("body").append("<div id=\"toTop\" style=\"width:15%;height:15%;padding:10px 13px 7px 13px;position:fixed;bottom:10px;right:10px;cursor:pointer;display:none;\"><img src=\"/Resource/Content/Themes/Mobile/images/520Activity/backTop.png\"></div>");
 9         $("#toTop").click(function () {
10             $("body,html").animate({ scrollTop: 0 }, 800);
11         });