js点击返回顶部带过渡效果

最新推荐文章于 2022-08-05 10:33:49 发布
最新推荐文章于 2022-08-05 10:33:49 发布
阅读量155 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_19991024/article/details/120714765
版权 
timer = setInterval(function() {
        if (document.documentElement.scrollTop <= 0) {
            clearInterval(timer);
        }
        window.scrollTo(0, document.documentElement.scrollTop - 100)
    }, 16.5)

定时器函数，没秒回100高度

Anger_L
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用js实现返回页面顶部
04-20
NULL 博文链接：https://ihenu.iteye.com/blog/1885565
js原生回到顶部，并平滑过渡---- 记录
weixin_30711917的博客
01-15 154
1 window.scrollTo({ 2 top: 0, 3 behavior: 'smooth', 4 }); 转载于:https://www.cnblogs.com/lml2017/p/10273176.html
js一行代码实现回到顶部滚动(带过渡效果)
小阮的笔记本
08-30 615
//html //锚点 <div class="title" id="#title">锚点</div> //跳转 <div @click="scollTo()"> </div> //js scollTo() { document.querySelector('#title').scrollIntoView({ behavior:'smooth', block:'start' }); }, 详情MDN ...
js返回顶部效果 很炫
10-26
js返回顶部效果，很炫
鼠标点击跳转到屏幕顶部 加过度时间 动画效果
weixin_44081699的博客
01-08 297
&lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0; font-size: 50px; } ...
带平滑效果的js返回顶部特效.zip
07-11
这个“带平滑效果的js返回顶部特效”就是一种创新的实现方式，旨在为用户带来更加流畅和舒适的浏览体验。下面将详细介绍这个特效的实现原理、主要技术点以及如何在实际项目中应用。 首先，我们来解析这个特效的核心...
jQuery带微博按钮返回顶部效果.zip
07-03
【jQuery带微博按钮返回顶部效果】是一个网页交互特效，它结合了jQuery库和CSS3技术，为用户提供了一种新颖的返回顶部体验。该特效在页面滚动到底部时，会在右下角显示一个带有微博图标的小按钮，点击后页面将平滑...
CSS带返回顶部右侧悬浮菜单.zip
07-11
这个需求可以通过CSS和JavaScript来实现，如"CSS带返回顶部右侧悬浮菜单.zip"这个压缩包所示。这个资源包含了一个简单的实现示例，下面将详细介绍其主要知识点。 1. **CSS（层叠样式表）**： - **布局与定位**：...
带平滑效果的js返回顶部特效特效代码
03-20
本文将深入探讨“带平滑效果的js返回顶部特效”这一主题，帮助开发者实现更佳的交互体验。 平滑效果，通常指的是在页面滚动过程中，元素以连续且流畅的方式移动，而不是瞬间跳转。这种效果可以为用户带来更为舒适的...
js原生实现过渡效果的返回顶部功能实例
任聪聪的博客
03-30 954
问题描述 适用范围：所有前端界面，返回顶部按钮 兼容：ie 9 以上 以下是实现功能的代码： <div style="position: fixed; width: 40px; height: 40px; background: rgb(0, 0, 0); cursor: pointer; bottom: 202px; right: 100px; border-radius: 10px;...
获取滚动条位置documentElement.scrollTop和body.scrollTo
lbknxy的专栏
05-04 3573
获取滚动条位置documentElement.scrollTop和body.scrollTo 以及||符号的作用
document.documentElement.scrollTop
weixin_44283589的博客
08-05 7443
在标准的w3c下，document.body.scrollTop恒为0，需要用document.documentElement.scrollTop来代替;js中每个载入浏览器的HTML文档都会成为Document对象，documentElement 对应的是 html 标签，如果发现两个高度不一样，是css设置的问题，你的html高度不一定高于body。用body查看，其中clientHeight即为body的css高度，而不是：document.body.scrollTop;...
自定义滚动条
局外人LZ的博客
07-09 102
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport"> <style> body{ margin: 0; padding: 0; } #scroll{ width: 5px;
javaScript如何实现点击Top回到顶部，与带动画过渡效果
weixin_46449470的博客
06-02 5921
javaScript如何实现点击Top回到顶部 例子： css代码 <style> body{ height: 3500px; font-size: 40px; } #ceshi{ position: fixed; right: 0; bottom: 140px; width: 200px;
js控制滚动条位置并添加过渡效果
kuBi_MaNong的博客
04-04 2619
js改变滚动条位置使用scrollTop属性 // 网页可见区域高：document.body.clientHeight // 网页正文全文高：document.body.scrollHeight // 网页可见区域高（包括边框的高）：document.body.offsetHeight // 网页被卷去的高：document.body.scrollTop demo <!DOCTYPE html> <html lang="en"> <head> <meta
js回到顶部，带过渡动画效果
海贼王某人的博客
05-12 1713
先来看看实现的效果： js点击回到顶部添加过渡动画效果 这里我就直接贴js代码了，html代码我就不写了，就是回到顶部按钮的一个点击事件，我用的vue,this.myTimer是data函数里面的一个变量，你可以自己声明一个变量，主要是用做定时器的 代码如下: toTop() { // 返回顶部,添加过度动画，如果下拉距离超过10000，就统一0.8秒回到顶部，否则按默认速度
js实现一个有过渡效果的回到顶部
weixin_44474589的博客
04-15 1428
js实现一个简单有过渡效果的回到顶部 <span style="position: fixed;width: 50px;height: 50px;border-radius: 50%;text-align: center;line-height: 50px;bottom: 50px;right: 50px;background: #fff;box-shadow: 1px 1px 10px #...
JavaScript - PC端页面纯 JS 实现返回顶部（带过渡动画）
王佳斌
03-16 684
效果图 实现 给 DOM 元素（返回顶部按钮），绑定点击事件。 /* * 返回页面顶部方法 * @return void */ function toTop() { var scrollTop = document.body.scrollTop; document.body.style.marginTop = -scrollTop + 'px'; document.body.scrollTop = 0; document.body.style.transition =
请帮我生成一段点击按钮后返回页面顶部的代码，并带有过渡效果
最新发布
04-05
以下是一个基本的返回页面顶部的HTML和CSS代码，包括过渡效果： HTML代码： ``` <button onclick="topFunction()" id="myBtn" title="返回顶部">Top</button> ``` CSS代码： ``` #myBtn { display: none; position: fixed; bottom: 20px; right: 30px; z-index: 99; font-size: 18px; border: none; outline: none; background-color: #555; color: white; cursor: pointer; padding: 15px; border-radius: 4px; } #myBtn:hover { background-color: #777; } ``` JavaScript代码： ``` // 当页面滚动超过20像素时，显示返回顶部按钮 window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("myBtn").style.display = "block"; } else { document.getElementById("myBtn").style.display = "none"; } } // 点击按钮返回页面顶部 function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } ``` 如果你想要添加过渡效果，可以将JavaScript代码修改如下： ``` // 点击按钮返回页面顶部，并添加过渡效果 function topFunction() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; document.documentElement.style.transition = "scroll-behavior 0.5s ease-in-out"; } ``` 这里的`scroll-behavior`是CSS属性，用于指定页面滚动时的行为。在这里，我们将其设置为`smooth`，表示页面滚动会平滑地过渡。注意，这个属性目前只在Chrome、Firefox、Safari和Opera浏览器中有效，IE和Edge浏览器不支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值