大家好，又见面了，我是你们的朋友全栈君。
【1】使用默认链接锚点
添加一个a链接，设置a链接的href属性值为”#top”即可实现
<div>我在顶部</div>
<!-- 很多内容 -->
<!-- 很多内容 --><!-- 很多内容 --><div><a href="#top">返回顶部</a></div>
【2】href指定id
给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素
<div id="goTop">我在顶部</div>
<!-- 很多内容 -->
<!-- 很多内容 --><!-- 很多内容 --><div><a href="#goTop">返回顶部</a></div>
【3】使用自定义链接锚点
在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点
<a name="goTop"></a>
<div>我在顶部</div>
<!-- 很多内容 -->
<!-- 很多内容 --><!-- 很多内容 --><div><a href="#goTop">返回顶部</a></div>
【4】使用简单的JavaScript脚本
设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置
<div>我在顶部</div>
<!-- 很多内容 -->
<div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>
【5】使用简单的jQuery实现
1 <div class="container"> 2 <div class="header"> 我是头部</div> 3 <div class="content">我是内容，高是1000px</div> 4 <div class="footer">我是页脚</div> 5 <div id="goToTop"><a href="#">点我回到页面顶部</a></div> 6 </div>
View Code
1 <style type="text/css"> 2 .container { 3 width:980px; 4 margin:0 auto; 5 height:auto; 6 min-height:100%; 7 position:relative; 8 } 9 .content { 10 height: 2000px; 11 border: 1px solid red; 12 } 13 #goToTop { 14 position: fixed; 15 bottom: 20px; 16 right: 10%; 17 } 18 #goToTop a { 19 background: none repeat scroll 0 0 #336699; 20 border: 1px solid #CCCCCC; 21 border-radius: 3px; 22 -webkit-border-radius: 3px; 23 color: #FF9966; 24 font-size: 14px; 25 padding: 5px; 26 text-decoration: none; 27 text-shadow: 0 1px 0 #999; 28 -webkit-text-shadow: 0 1px 0 #999; 29 } 30 </style>
View Code
1 <script type="text/javascript" src="js/jquery.min.js"></script> 2 <script type="text/javascript"> 3 $(document).ready(function(){ 4 $('#goToTop a').click(function(){ 5 $('html,body').animate({scrollTop:0},'slow'); 6 }); 7 }); 8 </script>
View Code
【6】火箭上升式返回顶部（jQuery实现）
上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。
1 <head> 2 <meta charset="UTF-8"> 3 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 4 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 5 <title>Document</title> 6 <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 7 <style> 8 .header { 9 color: rgb(243, 152, 6); 10 width: 100%; 11 height: 200px; 12 margin: 0 auto; 13 text-align: center; 14 font-size: 20px; 15 } 16 .footer { 17 position: fixed; 18 right: 50px; 19 bottom: 50px; 20 width: 54px; 21 height: 54px; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="header">我在顶部</div> 27 <!-- 很多内容 --> 28 <br><br><br><br><br><br><br><br><br><br><br><br><br> 29 <br><br><br><br><br><br><br><br><br><br><br><br><br> 30 <br><br><br><br><br><br><br><br><br><br><br><br><br> 31 <br><br><br><br><br><br><br><br><br><br><br><br><br> 32 <br><br><br><br><br><br><br><br><br><br><br><br><br> 33 <br><br><br><br><br><br><br><br><br><br><br><br><br> 34 <!-- 很多内容 --> 35 <img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt=""> 36 37 <script> 38 function gotoTop(minHeight){ 39 40 // 定义点击返回顶部图标后向上滚动的动画 41 $("#gotoTop").click( 42 function(){$('html,body').animate({scrollTop:'0px'},'slow'); 43 }) 44 45 // 获取页面的最小高度，无传入值则默认为600像素 46 minHeight? minHeight = minHeight:minHeight = 600; 47 48 // 为窗口的scroll事件绑定处理函数 49 $(window).scroll(function(){ 50 51 // 获取窗口的滚动条的垂直滚动距离 52 var s = $(window).scrollTop(); 53 54 // 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐 55 if( s > minHeight){ 56 $("#gotoTop").fadeIn(500); 57 }else{ 58 $("#gotoTop").fadeOut(500); 59 }; 60 }); 61 }; 62 gotoTop(); 63 </script> 64 </body>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/155704.html原文链接：https://javaforall.net
