js原生实现过渡效果的返回顶部功能实例

问题描述
适用范围：所有前端界面，返回顶部按钮
兼容：ie 9 以上

以下是实现功能的代码：

<div style="position: fixed; width: 40px; height: 40px; background: rgb(0, 0, 0); cursor: pointer; bottom: 202px; right: 100px; border-radius: 10px; display: none;" id="goup-container"><div class="goup-arrow" style="width: 0px; height: 0px; margin: 0px auto; padding-top: 13px; border-style: solid; border-width: 0px 10px 10px; border-color: transparent transparent rgb(255, 255, 255);"></div>
</div>
<script>//回到顶部按钮window.onload = function() {var top_btn = document.getElementById('goup-container');var timer = null;var isTop = true;//获取页面的可视窗口高度var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;//滚动条滚动时触发window.onscroll = function(){//在滚动的时候增加判断var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错if (osTop >= clientHeight*0.15) {top_btn.style.display = 'block';}else{top_btn.style.display = 'none';}if (!isTop) {clearInterval(timer);}isTop = false;};top_btn.onclick = function(){//设置定时器timer = setInterval(function(){//获取滚动条距离顶部的高度var osTop = document.documentElement.scrollTop || document.body.scrollTop;  //同时兼容了ie和Chrome浏览器//减小的速度var isSpeed = Math.floor(-osTop / 6);document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;//console.log( osTop + isSpeed);isTop = true;//判断，然后清除定时器if (osTop == 0) {clearInterval(timer);}},30);};}</script>

js原生实现过渡效果的返回顶部功能实例相关推荐

前端开发——图标返回顶部功能
前端开发--点击图标,返回顶部功能功能实现:网页右下角的一键返回顶部图标方法:利用周期性定时器+鼠标滚动事件 html: <div id="retutop">< ...
Bilibili返回顶部功能实现
Bilibili返回顶部功能实现文章目录 Bilibili返回顶部功能实现实现原理 1. 图 2. 实现代码最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
微信小程序(返回顶部功能)
//创建组件backTop backTop.json {"component": true, //作为组件使用"usingComponents": {} } b ...
HTML 返回顶部功能
HTML 最简单实现返回顶部功能 1.添加一个超链接,然后给其href="#top",则可以实现返回顶部可以和img标签结合使用实现功能. 2.给body标签设置id,添加超链接 ...
前端 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 ...
js+JQuery实现返回顶部功能
很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a ...
网页返回顶部功能实现
一.效果图: 二.准备工作: jquery-3.6.0.min.js下载(链接如下) Download jQuery | jQuery 如图,右键选择Download the compressed.. ...
jquery 实现返回顶部功能
1. html 中添加一个返回顶部的按钮,本例中采用了一个绝对定位的div,(position:fixed),背景色给了一定的透明度,并加入一个向上的箭头icon. 2. 绑定window 的scro ...

js原生实现过渡效果的返回顶部功能实例

js原生实现过渡效果的返回顶部功能实例相关推荐

最新文章

热门文章