滚动相应效果——返回顶部

以你之姓@ 2021-09-13 14:54 412阅读 0赞

![Center][]

1.html

<div class="setop"> <a href="#" οnclick="goTop();return false;" > <img src="themes/images/setop.jpg"/></a> </div>

2.js

//返回顶部 function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数 if(x > 0 || y > 0) { var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; window.setTimeout(invokeFunction, time); } }

或是

$('.zn-fixedringt-gotop').on('click',function(){ $('body,html').animate({scrollTop:'0px'}, 800); //scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。 })

[Center]: /images/20210813/0f060d47e253481d8d61df2b23087cf0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，412人围观）

还没有评论，来说两句吧...

相关阅读

相关 js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

我会带着你远行/ 2023年03月03日 13:25/ 0 赞/ 19 阅读

相关 vue 跳转组件滚动条返回顶部

在 app.vue 下监听 $route 发生变化就让滚动条回到顶部； export default { name: 'App', w

ゝ一世哀愁。/ 2022年11月27日 08:44/ 0 赞/ 205 阅读

相关返回顶部

点击返回顶部，简单易学效果图： ![Center][] 第一步：将返回按钮fixed到具体位置后隐藏第二步：当浏览器滚动条大于多少像素时显示按钮，小于多少时隐

拼搏现实的明天。/ 2022年08月18日 12:23/ 0 赞/ 332 阅读

相关 jquery实现返回顶部效果

jQuery("\gotop").css('display','none');jQuery(window).scroll(function()\{if(jQuery(this)

我就是我/ 2022年08月04日 13:52/ 0 赞/ 284 阅读

相关 jquery实现返回顶部按钮和scroll滚动功能[带动画效果]

jQuery脚本： ![复制代码][copycode.gif] 1 <script type="text/javascript"> 2 $

墨蓝/ 2022年06月13日 10:24/ 0 赞/ 246 阅读

相关返回顶部效果!

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。 <!DOCTYPE html> <html lang="en"> <

妖狐艹你老母/ 2022年06月04日 06:15/ 0 赞/ 344 阅读

相关 javascript 元素滚动到顶部固定效果(搜索框在顶部悬停)

除了搜索框，或者导航栏等类型特效都可以采用相同的方式解决。无疑像效果图所演示的效果相对于固定导航栏来说要更难一些。有其它效果需要更改，请自行修改下方源码。在线演示地址：[

雨点打透心脏的1/2处/ 2021年12月24日 10:27/ 0 赞/ 483 阅读

相关功能1 -- 顶部导航栏和返回顶部效果

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] <!DOCTYPE html> <html><hea

秒速五厘米/ 2021年12月14日 12:35/ 0 赞/ 410 阅读

相关原生JS返回顶部，带返回效果

有些网站当滑到一定高度时右下角会有一个按钮，你只要一点就可以直接返回顶部了。那这个功能是怎么做到的呢。其实不算太难；首先我们先在网页中创建一个按钮，上面写上返回顶部，把它的

秒速五厘米/ 2021年10月01日 02:02/ 0 赞/ 391 阅读

相关滚动相应效果——返回顶部

![Center][] 1.html <div class="setop"> <a href="" οnclick="goTop();return false;"

以你之姓@/ 2021年09月13日 14:54/ 0 赞/ 413 阅读