使用scrollTop回到顶部时间
锚链接
使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.
功能点
1、返回顶部的过程是一个由快到慢的滚动过程;
2、在返回顶部的滚动过程中,如果滚动鼠标滚轮,可暂停在当前位置。
3、滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;
主要知识点
1、DOM操作
document.getElementById
-根据ID获取标签元素var obtn=document.getElementById('btn')
;
获取浏览器距离顶部的高度,注意在chrom和IE等浏览器的兼容性
-document.documentElement.scrollTop
滚动条到顶端的距离,可以读写(适用 IE 类浏览器)
-document.body.scrollTop
滚动条到顶端的距离,可以读写(适用 chrome 类浏览器)
2、事件运用
window.onload 页面加载完毕后触发
onclick 点击后触发
window.onscroll 滚动条滚动时触发
3、定时器
setInterval() 设置定时器,需传入两个参数:第一个是重复执行的函数,第二个是函数重复执行的时间间隔
clearInterval() 关闭定时器,需传入一个参数:定时器对象
代码
首先获取元素标签,并对其绑定点击事件:获取滚动条距离顶部的高度并进行赋值操作。这样可实现每点击一次滚动条向上滚动200的距离,需要不断触发点击事件直到滚动条回到顶部为止。
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;
//osTop=200;
document.documentElement.scrollTop=document.body.scrollTop-=200;
使用setInterval()函数,每隔一段时间执行一次赋值操作。并当滚动条距离顶部的高度值osTop为0时,清除定时器。
为了实现滚动条向上滚动的过程是一个由快到慢的过程,执行下面的运算。ispeed
的绝对值越大、滚动条距离顶部的高度值就越小,即回到顶部的速度就越快;ispeed
的绝对值越小,返回顶部的速度就相对较小。
在这里使用Math.floor()
向下取整,当osTop / 5
介于0~1之间时,ispeed的值舍为0。这样的话chrome浏览器中滚动条距离顶部的高度值 document.body.scrollTop= osTop-0
,这样滚动条的距离顶部的高度会一直为某个数字。导致滚动条到顶部的距离永远不会为0,这样滚动条看似在顶部位置停止,实际上鼠标下拉滚动条时发现滚动条依然会向上滚动,说明定时器一直在执行。
var ispeed=Math.floor(osTop / 5);
document.documentElement.scrollTop=document.body.scrollTop = osTop-ispeed;
// console.log(osTop-ispeed);
但是,用Math.ceil()向上取整,可保证ispeed
的值不会为0;或者依然使用Math.floor()将值改为负值Math.floor(-osTop / 5)
是一样的道理。代码如下:
var timer = null;
obtn.onclick=function(){//设置定时器timer=setInterval(function(){//获取滚动条距离顶部的高度var osTop=document.documentElement.scrollTop|| document.body.scrollTop;var ispeed=Math.floor(-osTop / 5);isTop = true;document.documentElement.scrollTop=document.body.scrollTop = osTop+ispeed;if(osTop==0){clearInterval(timer);}},30);}
这样就实现了点击返回顶部按钮,页面返回顶部的速度随着滚动条到顶部距离的减小而变慢,即实现了一个速度由快到慢的过程。
window是一个窗口类,onscroll是窗口类window的对象,滚动滚动条时触发。
这里window.onscroll
事件的目的,就是在使用鼠标的滚动按钮滚动页面时停止setInterval.用的方法是添加一个isTop.由于页面是一点一点滚动的,函数会被执行多次。鼠标滚动,触发window.onscroll
,执行完里面的函数后才执行setInterval,但是在执行window.onscroll
事件第二次的时候!isTop=true
,清楚定时器,这个时候就不再往上滚动了。
var isTop = true;var clientHeight = document.documentElement.clientHeight;//获取页面可视区高度window.onscroll=function(){//alert(clientHeight);//滚动条滚动触发if(!isTop)//条件为真时执行清除定时器操作clearInterval(timer);isTop = false;}
实现了滚动暂停,另外再在window.onscroll
事件中使用脚本控制“回到顶部”按钮的显示与隐藏
var osTop=document.documentElement.scrollTop|| document.body.scrollTop;if(osTop >= clientHeight){obtn.style.display = 'block';}else{obtn.style.display = 'none';}
问题:
var osTop = document.documentElement.scrollTop为什么不能做全局变量
1、尽量不要使用全局变量。每声明一个全局变量会占用一点内存,另外会造成变量名污染;
2、var osTop = document.documentElement.scrollTop。如果写在外面,osTop只是在JS文件载入时获取滚动条距离顶部的高度,但有的时候,如页面在滚动的时候osTop的值是在不断变化的,所以我们要在绑定scroll事件中不断的去获取osTop的值.
使用scrollTop回到顶部时间相关推荐
- html双击回顶部,百度/微信小程序点击按钮回到顶部(scrollTop=0)/点击拨打电话...
一.HTML部分 二.JS部分页面滚动回到顶部 1.监听页面滚动事件 onPageScroll(e) { // console.log(e.scrollTop) if (e.scrollTop > ...
- jQuery-点击按钮实现回到顶部的两种方式
文章目录 1.点击按钮,快速回到顶部 2.点击按钮,缓慢的回到顶部 3.效果图参考: 1.点击按钮,快速回到顶部 <html><head><base href=" ...
- html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
- 一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部
前言 今天在网上搜索"回到顶部"的 jQuery 插件,网上有很多,但是大部分都不支持让 Div 中的滚动条回到顶部.于是乎,不放弃,自己参考 Github 上的一个 jQuery ...
- vue 给某个div设置回到顶部
1.对某个div设置了滚动,想要回到顶部的情况 这种情况下一定要找到是在哪个元素下设置的overflow滚动,就在哪个元素下加 方法一.在当前页面无法使用ref获取元素时候,可以使用jq简单实现: 1 ...
- 微信小程序自定义回到顶部
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.自定义回到顶部按钮 二.使用步骤 1.第一步获取屏幕被卷去多少距离 2.进行判断,例如我需要屏幕滚到大于600的时 ...
- Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景 开发框架是vue+webpac ...
- 前台特效(2)回到顶部
---恢复内容开始--- 原生js(有兼容性问题): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&quo ...
- vue 返回滚动条顶部组件_vue中回到顶部
1. 回到顶部,使用 scrollIntoView 方法: Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 该方法可以接受一个布尔值作为参数.如果为true,表示元 ...
最新文章
- mac git使用与配置踩过的坑
- TCP通过滑动窗口和拥塞窗口实现限流,能抵御ddos攻击吗
- 字节流 system.in
- SRM 721 DIV2
- python3.7.3 离线安装paramiko_centos7 python3 安装paramiko模块
- 基本的maven的命令行命令
- 魅族Android10内测招募答案,10款机型升级Android 10!魅族Flyme即日起内测招募
- git bash命令_更优雅地使用命令行
- Linux基础(管道符、重定向、转义字符与环境变量)
- mysql 表上线_腾讯云上线数据库 MySQL 8.0 版
- 谈谈spring-boot不同包结构下,同样的类名冲突导致服务启动失败解决方案
- CVPR2021论文整理
- Flutter之GlobalKey详解
- WinCC7.3 Win764位系统安装教程
- pdg转pdf的正确方法!!
- 和导师闹僵跑来实习?拼了命也要拿到大厂实习offer
- u深度制作linux启动盘制作工具,U深度制作u盘启动盘制作工具
- HHKB连不上Ubuntu
- np.repeat函数
- GPT分区下DEEPINV20.6添加win7(MBR)启动