html返回顶部动画,基于JavaScript实现回到页面顶部动画代码

最近做的都是前端的项目，很多项目都有回到顶部的需求，下面把我写js代码做个笔录，方便以后查找。

发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能，参考了imooc上相关课程，最终实现JS代码如下：

//页面加载后触发

window.onload = function(){

var btn = document.getElementById('btn');

var timer = null;

var isTop = true;

//获取页面可视区高度

var clientHeight = document.documentElement.clientHeight;

//滚动条滚动时触发

window.onscroll = function() {

//显示回到顶部按钮

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

if (osTop >= clientHeight) {

btn.style.display = "block";

} else {

btn.style.display = "none";

};

//回到顶部过程中用户滚动滚动条，停止定时器

if (!isTop) {

clearInterval(timer);

};

isTop = false;

};

btn.onclick = function() {

//设置定时器

timer = setInterval(function(){

//获取滚动条距离顶部高度

var osTop = document.documentElement.scrollTop || document.body.scrollTop;

var ispeed = Math.floor(-osTop / 7);

document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;

//到达顶部，清除定时器

if (osTop == 0) {

clearInterval(timer);

};

isTop = true;

},30);

};

以上内容是小编给大家介绍的基于JavaScript实现回到页面顶部动画代码，代码简单易懂，所有没给大家附太多的注释，如果大家在参考过程中发现有任何疑问欢迎给我留言，小编会及时回复大家的！

html返回顶部动画,基于JavaScript实现回到页面顶部动画代码相关推荐

基于JS实现回到页面顶部的五种写法(从实现到增强)
为什么80%的码农都做不了架构师?>>> 写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返 ...
js浏览器回到顶部方法_基于JS实现回到页面顶部的五种写法(从实现到增强)
写法 [1]锚点使用锚点链接是一种简单的返回顶部的功能实现.该实现主要在页面顶部放置一个指定名称的锚点链接,然后在页面下方放置一个返回到该锚点的链接,用户点击该链接即可返回到该锚点所在的顶部位置 [ ...
jq实现页面滑动到一定位置显示返回顶部按钮，点击回到页面顶部
返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现: 点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s) ...
android 按钮点击返回顶部,微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法...
后续补我框好串端题近还架比作和和近还架比作和和充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引起的部分机型兼容问题,因此会在返回的时候回到页面顶部,补充解决办法: 在弹窗 ...
vue 回到页面顶部
模仿Element-UI 回到页面顶部 BackToTop.vue<template><transition :name="transitionName"> ...
点击a标签，跳转到同一页面的指定内容，类似于点击按钮回到页面顶部效果
点击a标签,跳转到同一页面的指定内容,类似于点击按钮回到页面顶部效果这个效果实现方式很简单,只需要在a标签href内填上id名,在内容标签内加入id="名"便可. 下面是实现效果 ...
Vue 切换路由后页面回到页面顶部
Vue 切换路由后页面回到页面顶部 backTop() {window.scrollTo(0, 0)document.body.scrollTop = 0document.documentElemen ...
如何使用JavaScript滚动到页面顶部？
在滚动页面中如何使用JavaScript滚动到页面顶部?下面本篇文章就来给大家介绍一下使用JavaScript滚动到页面顶部的方法,希望对大家有所帮助. 在JavaScript中可以使用window. ...
HTMl页面加入落叶下雨动画,基于HTML5+Webkit实现树叶飘落动画
实现如图所示的东西效果(落叶下落): html代码: HTML5树叶飘落动画这是基于webkit的落叶动画 css代码: body{ background-color: #4E4226; } #co ...
html 网页跳转动画效果,jQuery实现切换页面过渡动画效果_jquery
直接为大家介绍制作过程,希望大家可以喜欢. HTML结构该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素,div.cd-cover-layer用于制作页面切换时的遮罩层,div.cd-l ...

html返回顶部动画,基于JavaScript实现回到页面顶部动画代码

html返回顶部动画,基于JavaScript实现回到页面顶部动画代码相关推荐

最新文章

热门文章