js实现返回顶部代码
下载次数：1
文件大小：32KB
所需积分：0
QQ联系购买积分：3331653644（1元=10积分）
回到顶部
这个“回到顶部”链接允许用户平滑地滚动回到页面的顶部。 这是一个细节，增强了长网页的网站导航体验。
此资源适合具有大量页面内容的网站。 在浏览器窗口滚动超过某一点后，链接在内容区域的右侧淡入，并在滚动期间保持固定。
如果用户继续滚动，该按钮会很好地减少其不透明度，以减少导航时的分心。
创建结构
我们在内容底部插入了“返回顶部”链接，位于结束标记之前。
<body>
<!-- all your content here -->
<a href="#0" class="cd-top">Top</a>
<!-- link to scripts here -->
</body>
添加样式
链接将固定显示在内容的右侧。 初始样式 visibility:hidden; 和 opacity:0;。
通过两个类来控制可见性和不透明度：.cd-is-visible和.cd-fade-out。
.cd-top.cd-is-visible {
/* the button becomes visible */
visibility: visible;
opacity: 1;
}
.cd-top.cd-fade-out {
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
opacity: .5;
}
这些类使用jQuery添加（或删除）到“回到顶部”的链接。
事件处理
在我们的.js文件中，我们定义了三个变量来控制“回到顶部”链接外观：
//browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700;
offset变量将用于切换类.cd-is-visible; offset_opacity，而不是添加.cd-fade-out类。
顶部滚动功能使用jQuery .animate() 方法实现，并绑定到“回到顶部”单击事件。
0 条评论