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

以你之姓@ 2021-09-13 14:54 391阅读 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 条评论，391人围观）

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

相关阅读

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

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

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

相关返回顶部

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

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

相关 jquery实现返回顶部效果

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

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

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

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

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

相关返回顶部效果!

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

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

相关 JavaScript原生代码实现返回顶部缓动效果

返回顶部比较特殊，需要使用，widow.scrollTo(x,y )去做先贴上全部代码，分析在下面 <!doctype html> <html la

爱被打了一巴掌/ 2022年06月01日 06:51/ 0 赞/ 282 阅读

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

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

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

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

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

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

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

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

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

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

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

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