返回顶部的五种实现方法 |
您所在的位置：网站首页 › html怎么设置返回顶部 › 返回顶部的五种实现方法 |
返回顶部的五种实现方法
|
大家好，又见面了，我是你们的朋友全栈君。 【1】使用默认链接锚点添加一个a链接，设置a链接的href属性值为”#top”即可实现 代码语言：javascript复制我在顶部 代码语言：javascript复制代码语言：javascript复制代码语言：javascript复制返回顶部【2】href指定id给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素 代码语言：javascript复制我在顶部 代码语言：javascript复制代码语言：javascript复制代码语言：javascript复制返回顶部【3】使用自定义链接锚点在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点 代码语言：javascript复制 我在顶部 代码语言：javascript复制代码语言：javascript复制代码语言：javascript复制返回顶部【4】使用简单的JavaScript脚本设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置 代码语言：javascript复制我在顶部 返回顶部【5】使用简单的jQuery实现代码语言：javascript复制1 2 我是头部 3 我是内容，高是1000px 4 我是页脚 5 点我回到页面顶部 6View Code 代码语言：javascript复制 1 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 } 30View Code 代码语言：javascript复制1 2 3 $(document).ready(function(){ 4 $('#goToTop a').click(function(){ 5 $('html,body').animate({scrollTop:0},'slow'); 6 }); 7 }); 8View Code 【6】火箭上升式返回顶部（jQuery实现）上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。 代码语言：javascript复制 1 2 3 4 5 Document 6 7 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 24 25 26 我在顶部 27 28 29 30 31 32 33 34 35发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/155704.html原文链接：https://javaforall.cn |
【本文地址】
今日新闻 |
推荐新闻 |