js——页面回到顶部

很久都没有去慕课网学习学习了，刚恰好就看见了一个用的比较多的小例子——页面回到顶部，记得之前自己也是在初学web时，被这个坑了一回，因此今天特地拿来分享分享……

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>页面回到顶部</title><link rel="stylesheet" type="text/css" href="mycss.css"><script type="text/javascript" src="myjs.js"></script>
</head>
<body><a href="javascript:;" id="btn" title="回到顶部"></a><div class="bg"><img src="data:images/tb_bg.jpg" alt="" /></div>
</body>
</html>

其中需要引入自己写的一个样式文件和一个js文件：

    #btn {width: 40px;height: 40px;position: fixed;display: none;right: 65px;bottom: 10px;background: url(images/top_bg.png) no-repeat left top;}#btn:hover {background: url(images/top_bg.png) no-repeat 0 -39px;}.bg {width: 1190px;margin: 0 auto;}

js文件：

//页面加载完毕后触发
window.onload = function() {var obtn = document.getElementById('btn');var clientHeight=document.documentElement.clientHeight;//获取页面可视区域的高度var timer = null; //存放定时器var isTop=true;//滚动条滚动时触发window.οnscrοll=function(){var osTop = document.documentElement.scrollTop || document.body.scrollTop;if(osTop>=clientHeight){obtn.style.display="block";}else{obtn.style.display="none";}if(!isTop){clearInterval(timer);}isTop=false;}obtn.onclick = function() {timer = setInterval(function() { //设置定时器//获取滚动条距离顶部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop;var ispeed=osTop/5;document.documentElement.scrollTop = document.body.scrollTop =osTop-ispeed;isTop=true;if(osTop==0){clearInterval(timer);}}, 30);}
}

文件存放路径：

基本“回到顶部”效果就这样子实现，只是我不会在文章中添加动态效果（就是实时的添加这个动态效果图），求大神赐教！

js——页面回到顶部相关推荐

页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
HTML点击元素页面回到顶部,博客园页面添加返回顶部 TOP 按钮
博客园页面添加返回顶部 TOP 按钮 TOP 按钮进入网页管理 -> 设置在 "页面定制 CSS 代码" 中添加如下 CSS 样式, 当然你可以改为自己喜欢的样式此处可 ...
Vue项目页面回到顶部
实现的方法: 一.借助element-plus框架的Backtop回到顶部组件(点击按钮缓慢回顶部) 注意:这个组件想显示出来,必须放到产生滚动效果的元素内部,且是放到最上面!所以必须明确是哪个元素有 ...
如何利用原生JS实现回到顶部以及吸顶效果
<style>.box1{width: 1200px;height: 800px;background-color: pink;margin: 0 auto;}.box2{width: 1 ...
js实现网页页面回到顶部
<script language="javascript"> $(function(){var $backToTopTxt = "返回顶部", $b ...
js浏览器回到顶部方法_js 返回顶部按钮
要求:当鼠标从顶部滚动后,显示返回顶部按钮,点击按钮,页面平滑滚动到顶部,按钮隐藏. 1.css #scrollTop{position:fixed;bottom:20px;right:20px;he ...
uniapp页面回到顶部方法
本文讲的是在uniapp项目中实现页面回顶效果的方法.以下是代码(回顶可能多个页面都需要用到建议封装成一个组件) 一.方法一 <template><view class=" ...
vue-router常见问题解决方案。（滚轴回到顶部、页面跳转同一页面报错、手机电脑端路由跳转）
当页面跳转后,侧边滚轴会还是一个页面位置 //路由跳转后,页面回到顶部 router.afterEach(() => {document.body.scrollTop = 0;document. ...

js——页面回到顶部

js——页面回到顶部相关推荐

最新文章

热门文章