a超链接之返回顶部的两种实现方法

1.通过css实现：

为页面顶部如body或者自己设置的盒子等加上唯一id属性

<body id="id">
....
<a href="#id">返回顶部</a>

2.js实现

通过设置标签滚动位置判断

document.body.scrollTop=0;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.cs_top{position: fixed;right: 10px;bottom: 10px;height: 60px;width: 60px;background-color: darkgray;opacity: 0.5;}.js_top{position: fixed;right: 10px;bottom: 120px;height: 60px;width: 60px;background-color: rebeccapurple;opacity: 0.5;}.hide{display: none;}#content{height:960px;width: 100%;}#content:before{content: 'top';display: block;}body:after{content: 'end';display: block;}</style><script></script>
</head>
<body onscroll="Func();"><div id="content"><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p><p>fdffa</p></div><div class="cs_top"><a href="#content">返回顶部</a></div><div class="js_top hide"><a href="javascript:void(0);" onclick="GoTop();">返回顶部</a></div>
</body>
</html>
<script src="../02js拾遗/jquery.js"></script>
<script>function Func(){var scrollTop=document.body.scrollTop;var ele=document.getElementsByClassName('js_top')[0];if (scrollTop>50){ele.classList.remove('hide');}else{ele.classList.add('hide');}}function GoTop(){document.body.scrollTop=0;}</script>

View Code

转载于:https://www.cnblogs.com/ssyfj/p/8503709.html

a超链接之返回顶部的两种实现方法相关推荐

JavaScript监听手机物理返回键的两种解决方法
JavaScript监听手机物理返回键的两种解决方法参考文章: (1)JavaScript监听手机物理返回键的两种解决方法 (2)https://www.cnblogs.com/xzzzys/p/8 ...
html页面刷新回到顶部_HTMl页面中返回顶部的几种实现小结
这篇文章我们来讲一下在网站建设中,HTMl页面中返回顶部的几种实现小结.本文对大家进行网站开发设计工作或者学习都有一定帮助,下面让我们进入正文. 最近在开发网站需要制作返回顶部按钮,但是我主要为后端开 ...
vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
Json返回时间中出现乱码问题的两种解决方法
Json返回时间中出现乱码问题的两种解决方法参考文章: (1)Json返回时间中出现乱码问题的两种解决方法 (2)https://www.cnblogs.com/hanyinglong/archiv ...
VLOOKUP函数返回错误值#N/A的两种解决方法
VLOOKUP函数返回错误值#N/A的两种解决方法参考文章: (1)VLOOKUP函数返回错误值#N/A的两种解决方法 (2)https://www.cnblogs.com/gonghongwei/ ...
Ext.Ajax.request和formPanel.getForm().submit()两种提交方法的异同：
Ext.Ajax.request和formPanel.getForm().submit()两种提交方法的异同: 1. 相同点: a) 都是使用异步提交的方式: b) 默认都是使用POST方式来提交数据 ...
python中的pandas的两种基本使用_pandas中join()的两种应用方法
pandas中join()方法很神奇,join()方法虽然是连接方法,但是因为pandas有两个数据结构,join()方法针对两个数据结构有着不同的连接方法:1.根据指定的分隔符将Series中的各个 ...
Java动态代理的两种实现方法：JDK动态代理和CGLIB动态代理
Java动态代理的两种实现方法:JDK动态代理和CGLIB动态代理代理模式 JDK动态代理 CGLIB动态代理代理模式代理模式是23种设计模式的一种,指一个对象A通过持有另一个对象B,可以具有B ...
在.NET中执行Async/Await的两种错误方法
微信公众号:架构师高级俱乐部关注可了解更多的编程,架构知识.问题或建议,请公众号留言; 如果你觉得此文对你有帮助,欢迎转发在.NET中执行异步/等待的两种错误方法在应用开发中,我们为了提高应用程 ...

a超链接之返回顶部的两种实现方法

a超链接之返回顶部的两种实现方法相关推荐

最新文章

热门文章