js 做返回顶部效果

涉及的知识点：

font-awesome字体图标；使用的cdn。
window.onload 窗口加载完成事件；如果js代码写在body标签之前，则所有的js都要写在window.onload的事件中；即等待窗口加载完成之后再执行！
window.onscroll 窗口滚动事件
窗口滚动的距离

document.documentElement.scrollTop ==>> 非IE滚动的距离

document.body.scrollTop ==>> IE滚动的距离

5. 定时器 setInterval 做返回顶部的动画效果

6. 清除定时器

实现步骤：

注册窗口滚动事件
滚动离顶部的距离大于300时，显示ICON
注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0
用定时器做返回顶部的滚动效果

完整代码：

<!DOCTYPE html>
<html lang="en">
<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>返回顶部效果</title><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"><style type="text/css">body{margin: 0;padding: 0;}#returnTop{position: fixed;right: 50px;bottom: 100px;}</style><script type="text/javascript">window.onload = function(){// 1.注册窗口滚动事件window.onscroll = function(){// 找到返回顶部的ICONvar returnTopICON = document.getElementById("returnTop");//非IE滚动的距离//console.log(document.documentElement.scrollTop);//IE滚动的距离//console.log(document.body.scrollTop);// Math.max 取非IE和IE两个滚动距离的最大值var scrollDistance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);// 2. 滚动离顶部的距离大于300时，显示ICONif(scrollDistance > 300){returnTopICON.style.display = 'block';}else{returnTopICON.style.display = 'none';}}//3. 注册点击事件，返回顶部 ==>> 即设置scrollTop 的值为0var returnTopICON = document.getElementById("returnTop");returnTopICON.onclick = function(){// 直接设置为0，是没有过渡效果的// document.documentElement.scrollTop = 0;// document.body.scrollTop = 0;// 4. 用定时器做返回顶部的滚动效果var dsj = setInterval(function(){var distance = Math.max(document.documentElement.scrollTop, document.body.scrollTop);distance -= 80;if(distance <= 0){          //如果滚动的距离 <= 0 时，清除掉定时器，否则点击图标滚动到顶部后，不能往下拉，一拉就又滚动到顶部clearInterval(dsj);}else{document.documentElement.scrollTop = distance;document.body.scrollTop = distance;}                    },40);}}</script>
</head>
<body><div style="background: firebrick;height: 500px;"></div><div style="height: 2000px;background: gainsboro"><p id="returnTop" style="display: none"><i class="fa fa-chevron-up fa-3x"></i></p></div>
</body>
</html>

效果：

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

js 做返回顶部效果相关推荐

原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)
一.实现效果二.实现功能搜索框滑动固定,伸缩动画菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...
layui页面返回顶部效果
 <link rel="stylesheet" type="text/css" href="'css/l ...
包含锚点平滑滚动效果/解决锚点链接碰到固定定位问题/导航选中背景变色/固顶/返回顶部效果全...
<script type="text/javascript">$(function() {//锚点平滑滚动效果 $('a[href*=#],area[href*=#]' ...
页面滚动事件和利用JS实现回到顶部效果
页面滚动事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
前端 css+js实现返回顶部功能
描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: 1 <div> 2 <button οnclick="returnTop()& ...
js实现返回顶部功能的解决方案
<span style="font-size:14px"><p id="back-to-top"><a href="#t ...
初次使用hammer.js做卡片滑动效果
项目新需求做卡片滑动的效果,因为大多数的一些js插件库是分开监听X和Y方向的,但是hammer.js是监听全方位,比较满足项目需求,所以初次尝试使用了下.大致如下: 具体的文档可以参考hammer.j ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...

js 做返回顶部效果

js 做返回顶部效果相关推荐

最新文章

热门文章