返回顶部的五种实现方法

返回顶部的五种实现方法【1】使用默认链接锚点添加一个a链接,设置a链接的href属性值为"#top"即可实现<div>我在顶部</div><!–很多内容–&g

大家好,又见面了,我是你们的朋友全栈君。

【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实现

<span role="heading" aria-level="2">返回顶部的五种实现方法
<span role="heading" aria-level="2">返回顶部的五种实现方法

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

 

<span role="heading" aria-level="2">返回顶部的五种实现方法
<span role="heading" aria-level="2">返回顶部的五种实现方法

 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

<span role="heading" aria-level="2">返回顶部的五种实现方法
<span role="heading" aria-level="2">返回顶部的五种实现方法

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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155704.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 安卓四大组件面试题_android常见面试题

    安卓四大组件面试题_android常见面试题1、Activity与Fragment之间常见的几种通信方式答:1.使用Bundle:在activity中建一个bundle,把要传的值存入bundle,然后通过fragment的setArguments(bundle)传到fragment,在fragment中,用getArguments接收。这个方法能保证在fragment销毁重建后依然能获取到传递过来的数据。2.采用接口回调的方式。3.EventBus。2.谈谈Android中几种LaunchMode的特点和应用场景?

  • 数据库原理期末考试题(经典题型)「建议收藏」

    数据库原理期末考试题(经典题型)「建议收藏」数据库原理期末考试题(经典题型)

  • win10怎么查看端口占用_怎么查看端口是否关闭

    win10怎么查看端口占用_怎么查看端口是否关闭**Step1:**使用管理员模式打开命令提示符窗口Step2:进入窗口之后,输入netstat-ano命令,可以查看所有被占用的端口**Step3:**也可以使用netstat-ano|findstr80,查看具体端口号占用情况**Step4:**输入tasklist|findstr“80”命令,端口号加英文双引号,可以查找到具体进程**Step5:**找到具体的进程名称之后,可以到任务管理器—》详细信息页面,结束进程,释放端口…

  • 字符串转时间格式

    字符串转时间格式importjava.text.ParseException;importjava.text.SimpleDateFormat;importjava.util.Date;publicclassAAAAAAAAAA{publicstaticvoidmain(String[]args)throwsParseException{SimpleDateFormatdateFormat=newSimpleDateFormat(“yyyy-MM-ddHH:mm:ss”);D

  • 遗传算法的优化算法_粒子群算法和遗传算法的区别

    遗传算法的优化算法_粒子群算法和遗传算法的区别与遗传算法的第一次接触遗传算法的基本概念基本定义遗传算法的基本流程遗传算法过程中的具体操作参数的编码二进制编码Gray编码实数编码有序编码初始群体的设定适应度函数的计算遗传操作设计选择selection交叉crossover变异mutation控制参数的设定求解优化问题的实例问题描述问题分析算法设计个体编码适应值函数选择策略杂交算子变异算子参数设置

  • SSD原理解读-从入门到精通「建议收藏」

    SSD原理解读-从入门到精通「建议收藏」SSD原理解读-从入门到精通

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号