回到顶部的几种实现方法

【1】使用默认链接锚点

添加一个a链接，设置a链接的href属性值为"#top"即可实现

<body><div>我在顶部</div><!-- 很多内容 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 很多内容 --><div><a href="#top">返回顶部</a></div>
</body>

【2】href指向特定的id

给页面顶部元素设置一个id值，将返回顶部a链接的href属性指向改id属性的元素

<body><div id="header">我在顶部</div><!-- 很多内容 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 很多内容 --><div><a href="#header">返回顶部</a></div>
</body>

【3】使用自定义链接锚点

在页面顶部定义一个锚点，然后将返回顶部a链接的href属性指向该锚点

<body><a name="goTop"></a><div>我在顶部</div><!-- 很多内容 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 很多内容 --><div><a href="#goTop">返回顶部</a></div>
</body>

【4】使用简单的JavaScript脚本

设置scrollTo(x,y)中的x和y的坐标值来滚动到页面的具体位置

<body><div>我在顶部</div><!-- 很多内容 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 很多内容 --><div><a href="javascript:window.scrollTo(0,0)">返回顶部</a></div>
</body>

【5】火箭上升式返回顶部（jQuery实现）

上面几种方式实现起来比较简单，但是效果生硬，直接从底部切换到顶部，没有一个过渡的动画。此方法能使页面动态滚动，同时将按钮换成一个箭头标志，判断页面滚动的距离，当页面滚动到一定的距离后再显示返回顶部箭头标志。这样的效果更佳生动。

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style>.header {color: rgb(243, 152, 6);width: 100%;height: 200px;margin: 0 auto;text-align: center;font-size: 20px;}.footer {position: fixed;right: 50px;bottom: 50px;width: 54px;height: 54px;}</style>
</head>
<body><div class="header">我在顶部</div><!-- 很多内容 --><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><!-- 很多内容 --><img class="footer" id="gotoTop" src="https://i02piccdn.sogoucdn.com/4f3b2858eec9e2cf" alt=""><script>function gotoTop(minHeight){// 定义点击返回顶部图标后向上滚动的动画$("#gotoTop").click(function(){$('html,body').animate({scrollTop:'0px'},'slow');})// 获取页面的最小高度，无传入值则默认为600像素minHeight? minHeight = minHeight:minHeight = 600;// 为窗口的scroll事件绑定处理函数$(window).scroll(function(){// 获取窗口的滚动条的垂直滚动距离var s = $(window).scrollTop();// 当窗口的滚动条的垂直距离大于页面的最小高度时，让返回顶部图标渐现，否则渐隐if( s > minHeight){$("#gotoTop").fadeIn(500);}else{$("#gotoTop").fadeOut(500);};});};gotoTop();</script>
</body>

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料

回到顶部的几种实现方法相关推荐

vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
jQuery-点击按钮实现回到顶部的两种方式
文章目录 1.点击按钮,快速回到顶部 2.点击按钮,缓慢的回到顶部 3.效果图参考: 1.点击按钮,快速回到顶部 <html><head><base href=" ...
微信小程序回到顶部的两种方式
一,使用view形式的回到顶部 HTML: <image src='../../img/button-top.png' class='goTop' hidden='{{!floorstatus} ...
a超链接之返回顶部的两种实现方法
1.通过css实现: 为页面顶部如body或者自己设置的盒子等加上唯一id属性 <body id="id"> .... <a href="#id&quo ...
HTML学习笔记之二（回到顶部与回到底部）
回到顶部回到底部回到顶部的俩种方式一.使用js [javascript] view plaincopy $('html, body').animate({ scrollTop: 0 }, 'fa ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
基于JS实现回到页面顶部的五种写法(从实现到增强)
为什么80%的码农都做不了架构师?>>> 写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返 ...
html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...
uniapp 微信小程序分页方法：uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
jq slimScroll 滚动条插件回到顶部方法
找了一圈居然没人写这个回到顶部的方法,只好自己写了.. 直接贴代码 //滚动条设置 $(".myDiv").slimScroll({width: 'auto',height: '1 ...

回到顶部的几种实现方法

回到顶部的几种实现方法相关推荐

最新文章

热门文章