动态效果要求：

点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方

实现原理：

设置对返回顶部按钮的单机响应函数

在此函数内部定一个返回顶部计时器 returnTop

在 returnTop 内部设置一个变量 top 储存滚动条距离顶部的位置

在 returnTop 内部设置一个变量 v 储存一个数值，该数值为 -top/5

再令 document.documentElement.scrollTop 的数值为 （ top + v ）

然后对 returnTop 定时器的执行间隔为30ms

如此每经过30ms，document.documentElement.scrollTop 的数值就会发生改变

此改变的值与 top 相关，top越大v越大，top越小v越小，从而达到实现点击按钮之后可以由快到慢地回到顶部

在 document.documentElement.scrollTop == 0 的时候设置清除计时器

代码展示：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo1</title><style>*{margin: 0;padding: 0;}body{width: auto;height: 3000px;background-image: linear-gradient(rgb(201, 200, 200),rgb(57, 56, 56));text-align: center;position: relative;}#btn{width: 65px;height: 65px;text-align: center;line-height: 65px;color: white;border: 1px solid black;background-color: gray;cursor: pointer;position: fixed;bottom: 20px;right: 20px;}</style>
</head>
<body><h1>TOP</h1><button id="btn">返回顶部</button><script>window.onload = function(){//获取按钮var btn = document.getElementById("btn")//设置按钮点击后返回顶部btn.onclick  = function(){//设置计时器var returnTop = setInterval(function(){//设置返回顶部距离var top = document.documentElement.scrollTop//设置速度差距var v = Math.floor(-top/5)document.documentElement.scrollTop = top + v//清除计时器if(top == 0){clearInterval(returnTop)}},30)}//调用是否隐藏按钮函数topGap()//设置当页面滚轮发生滚动时候的响应事件document.onscroll = function(){//调用是否隐藏按钮函数topGap()}}//设置是否隐藏按钮函数，判断scrollTop的数值，如果为零隐藏返回顶部按钮function topGap(){if(document.documentElement.scrollTop == 0){btn.style.display = "none"}else{btn.style.display = "block"}}</script>
</body>
</html>

效果展示：

返回顶部

javascript 设置返回顶部的效果相关推荐

html5 回到顶部按钮,“返回顶部”按钮效果
"返回顶部"按钮效果 pc端: 返回顶部 .wrapper { width: 1150px; height: 3582px; border: 2px solid black; } ...
扒皮下音悦台的“返回顶部”图标效果
昨晚想仿造下音悦台首页"返回顶部"的小超人效果,觉得这东西的实现很简单,应该不会费时超过一个钟.结果撸代码的过程发现存在很多意想不到的问题. 先发个图: 有兴趣的朋友可以去音悦台点 ...
html锚点怎么返回顶部,滑动效果的返回顶部锚点按钮
'TOP'置顶链接,说的通俗一点就是'返回顶部的链接','go to top '一般都放在页面的底部,它可以快速返回页面顶部,以节省用户浏览页面的时间. 它主要的应用场景是当你有一个很长的网页内容时 ...
JavaScript实现返回顶部按钮
利用滚动事件(scroll)和点击事件(onclick)实现返回顶部按钮 1.当滚动的到某个位置出现返回顶部按钮 2.点击返回顶部按钮,立即跳到最顶部. 代码实现如下 <!DOCTYPE htm ...
通过组件实现小程序底部Top按钮滑动到底部显示，其他情况则隐藏，点击按钮之后返回顶部的效果
前言提示:此篇是基于QQ小程序,但微信小程序的实现原理也基本都差不多. 所涉及到的知识点,先罗列一下: 1.监听页面滚动以及触发回顶部:onPageScroll 2.获取页面高度:createSel ...
前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
仿新浪微博返回顶部的js实现(jQuery/MooTools)
一.引言在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮:人人网的返回顶部直接在底部的工具 ...

javascript 设置返回顶部的效果

动态效果要求：

实现原理：

代码展示：

效果展示：

javascript 设置返回顶部的效果相关推荐

最新文章

热门文章