页面中到达顶部和底部的按钮

最新推荐文章于 2025-10-15 12:34:38 发布

转载最新推荐文章于 2025-10-15 12:34:38 发布 · 443 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wz0107/p/4547647.html

文章标签：

#javascript #ViewUI

本文介绍了三种在网页中实现返回顶部的方法，包括使用HTML锚点、JavaScript直接滚动和缓动效果滚动，以及如何实现缓慢到达页面底部的效果。通过这些技巧，可以提升用户体验并优化网页导航。

 1 到达页面顶部
 2 方法1：
 3 在body标签下面放<a href="" name='top' id='top'></a>
 4 在页面底部放<a href="#top">返回顶部</a>
 5 
 6 方法2：在需要返回顶部的地方放<a href="javascript:scrollTo(0,0);">返回顶部</a>
 7 ps:scrollto(x,y)x,y表示左上角的偏移量
 8 方法3：
 9 不同于前面2个，缓慢移动到顶部。
10 <a href="javascript:gotop()" class="">gotop</a>放在页面中需要的位置
11 js 在下面
12 var timer=null;
13 function gotop() {
14     timer=setInterval(function () {
15         if($(document).scrollTop()>0){
16             window.scrollBy(0,-100);
17         }else{
18             clearInterval(timer);
19         }
20     },40)
21 }
22 
23 到达页面底部
24 方法1：缓慢到达
25 <a href="javascript:gobutton();">返回顶部</a>
26 js 在下面
27 var timer=null;
28 function gobutton() {
29     timer=setInterval(function () {
30         if($(document).scrollTop()<$(document).height()-$(window).height()){
31             window.scrollBy(0,100);
32         }else{
33             clearInterval(timer);
34         }
35     },40)
36 }