文章摘要
这篇文章介绍了4个版本的“返回顶部”功能，旨在帮助用户快速加载页面顶部内容。基础版仅支持点击返回顶部，升级版增加了根据滚动距离显示按钮功能，兼容性版增强了代码兼容性，插件版则是一个更灵活的小型插件。
这篇文章的核心内容是逐步优化返回顶部功能的实现，从基础版到兼容性版再到插件版，逐步增强了功能，满足不同场景的需求。文章通过HTML代码和JavaScript脚本展示了不同版本的实现方式，同时保持了代码的简洁性和可读性。
1、基础版，只带返回顶部功能
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type="text/css"> .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; } .content { height: 2000px; border: 1px solid red; } #goToTop { position: fixed; bottom: 20px; right: 10%; } #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; } </style></head><body> <div> <div> 我是头部</div> <div>我是主内容，高度是2000px</div> <div>我是在最底部</div> <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div> </div> <script> // 原始版 $(function(){ $('#goToTop a').click(function(){ $('html , body').animate({scrollTop: 0},'slow'); }); }); </script></body></html> |
2、基础升级版，默认不显示，滚动到一定距离显示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type="text/css"> .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; } .content { height: 2000px; border: 1px solid red; } #goToTop { position: fixed; bottom: 20px; right: 10%; } #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; } </style></head><body> <div> <div> 我是头部</div> <div>我是主内容，高度是2000px</div> <div>我是在最底部</div> <div id="goToTop"><a href="javascript:;">点我返回顶部</a></div> </div> <script> // 改进版 $(function(){ $('#goToTop').hide(); //隐藏go to top按钮 $(window).scroll(function(){ // console.log($(this).scrollTop()); //当window的scrolltop距离大于1时，go to if($(this).scrollTop() > 100){ $('#goToTop').fadeIn(); }else{ $('#goToTop').fadeOut(); } }); $('#goToTop a').click(function(){ $('html ,body').animate({scrollTop: 0}, 300); return false; }); }); </script></body></html> |
3、兼容性版，加强浏览器兼容性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type="text/css"> .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; } .content { height: 2000px; border: 1px solid red; } #goToTop {position: absolute; right: -130px; z-index: 9000; } #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; } </style></head><body> <div> <div> 我是头部</div> <div>我是主内容，高度是2000px</div> <div>我是在最底部</div> </div> <script> // 加强版（兼容性基本完好） $(function(){ //goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改 var topDistance = 500; //距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1； var showDistance = 1; //定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签 var goToTopButton = $('<div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>'); var thisTop = $(window).scrollTop() + topDistance; //在container的div里插入我们前面定义好的html标签元素 $('.container').append(goToTopButton); //设置goToTop按钮top的css属性和属性值 $('#goToTop').css('top' ,thisTop); if($(window).scrollTop() < showDistance){ $('#goToTop').hide(); } // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行 $(window).scroll(function(){ // console.log($(this).scrollTop()); thisTop = $(this).scrollTop() + topDistance; //获取当前window向上滚动的距离 $('#goToTop').css('top', thisTop); //修改goToTop按钮的top距离 console.log(thisTop); if($(this).scrollTop() > showDistance){ $('#goToTop').fadeIn(); }else{ $('#goToTop').fadeOut(); } }); // 给按钮绑定一个click事件，点击按钮时，返回顶部 $('#goToTop a').click(function(){ $('html ,body').animate({scrollTop: 0}, 300); return false; }); }); </script></body></html> |
4、小型插件版
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!doctype html><html><head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> <style type="text/css"> .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; } .content { height: 2000px; border: 1px solid red; } #goToTop { position: fixed; bottom: 20px; right: 10%; } #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; } </style></head><body> <div> <div> 我是头部</div> <div>我是主内容，高度是2000px</div> <div>我是在最底部</div> <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div> </div> <script> // 编写jQuery返回顶部插件 jQuery.fn.goToTop = function(){ // 判断如果窗口滚动距离小于0，隐藏按钮 if($(window).scrollTop() < 0){ $('#goToTop').hide(); } // 窗口滚动时，判断当前窗口滚动距离 $(window).scroll(function(){ if($(this).scrollTop() > 1){ $('#goToTop').fadeIn(); }else{ $('#goToTop').fadeOut(); } }); // 给这个按钮绑定一个click事件 this.bind('click',function(){ $('html ,body').animate({scrollTop: 0},500); return false; }); }; //调用这个插件 $(function(){ $('#goToTop').goToTop(); }); </script></body></html> |
© 版权声明
文章版权归作者所有，未经允许请勿转载。
