关于js实现点击按钮平滑回到顶部的方法

最新推荐文章于 2026-03-29 04:01:24 发布

原创最新推荐文章于 2026-03-29 04:01:24 发布 · 723 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #开发语言

收录于

前端专栏收录该内容

3 篇文章

订阅专栏

该文章介绍了如何使用JavaScript实现点击页面上的一个元素（如‘回到顶部’按钮），使页面平滑滚动回到顶部的效果。关键函数是`scrollIntoView`，并设置`behavior`属性为smooth，以实现平滑滚动动画。

关于js实现点击按钮平滑回到顶部的方法

HTML部分

<body>
	<div onclick="returnTop()">回到顶部</div>
</body>

javascript部分

function returnTop(){
	document.documentElement.scrollIntoView({
    behavior:'smooth'
  })
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

天空蛋

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

双击页面任意空白处返回顶部JS代码

欢迎来到鸾姝淡月博客，专为程序员和编程爱好者打造的技术博客。我们分享编程语言趋势、开发工具、编程哲学、职业发展等，助你掌握新技术，优化技能，激发编程热情。

07-17

454

在所有页面空白处双击左键，自动返回网页顶部。

参与评论您还未登录，请先登录后发表或查看评论

js：scroll平滑滚动页面或元素到顶部或底部的方案汇总

彭世瑜的博客

07-12

1万+

可能在部分老旧设备上存在兼容性，从网上收集了一个多设备支持的缓冲方案margin : 0;

用生活案例秒懂CPU数据通路：从快递系统到计算机内部的数据传输奥秘

最新发布

weixin_30872157的博客

03-29

604

本文通过快递系统的生活案例，生动解析CPU数据通路的运作原理，包括单总线系统和专用数据通路的设计优劣。帮助读者轻松理解计算机组成原理中的核心概念，如寄存器、ALU和总线传输，并提供了优化代码的实用建议。

使用纯JavaScript实现点击按钮返回页面顶部的代码

TechNovaX的博客

10-08

609

在网页开发中，有时我们希望在页面中添加一个按钮，使用户能够轻松地回到页面的顶部。首先，我们需要在HTML中创建一个按钮元素，并为其添加一个唯一的ID，以便我们可以在JavaScript中引用它。现在，当用户点击按钮时，页面将平滑地滚动回顶部。通过在页面加载完成后执行相应的初始化操作，我们可以确保按钮元素已经被正确获取，并且事件监听器已经被添加。接下来，我们将使用JavaScript来添加事件监听器，以便在按钮被点击时执行相应的操作。最后，我们将在页面加载完成后执行一些初始化操作，以确保按钮的正确功能。

js 平滑回到顶部

weixin_47581490的博客

05-05

534

behavior: 'smooth', // 平滑过渡。方法四：直接回到顶部（无过渡效果）方法三：锚点定位（无过渡效果）

【JS】顶部悬浮及缓慢回到顶部

xxxxxwxx的博客

08-23

644

拉动滚动条时“回到顶部”按钮位置不变(使用JS实现)，点击缓慢回到顶部。

jq超级简单的回到顶部效果

weixin_46352236的博客

12-10

621

前言很简单的用jq实现回到顶部的效果,其实还有其他的办法实现回到顶部效果,但是个人觉得这个比较好用 1.使用前别忘了引入jq,先看代码代码如下（示例）： <html> <head> <title>回到顶部</title> <script src="jquery.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/.

html+js置顶按钮代码,js+css实现回到顶部按钮（back to top）

weixin_42356892的博客

06-01

617

本文实例介绍了js+css实现回到顶部按钮的方法，分享给大家供大家参考，具体内容如下htmlcss属性给跳转链接中的文字添加渐变效果*/-moz-transition:color1s;-webkit-transition:color1s;-o-transition:color1s;}p#back-to-top a:hover{color:#979797;}p#back-to-top a span{...

项目中实现返回顶部

m0_51328823的博客

01-04

413

实现返回顶部我们可以通过原生js实现 // 基本样式 <div class="home" ref="home"> <span class="hui">回到顶部</span> </div> .hui { position: fixed; bottom: 20px; right: 20px; padding: 10px; background-color: #39c894; color: #fff; font-size: 30px;

js实现回到顶部界面

web_xaiomengxin的博客

08-20

568

当前界面是没有回到顶部按钮（按钮已隐藏），当向下滑动滚动条时显示按钮，点击按钮回到顶部。 css部分: *{margin: 0;padding: 0} body{ height: 2000px; background: lightskyblue; } .to-top{ posi...

【JavaScript】---- 纯 js 实现返回页面顶部

止于至善

03-19

3045

由于直接设置 scrollTop 为 0，因此执行过程不够平滑，直接返回顶部，体验不好！实现了平滑滚动到顶部；在滚动完成后执行回调函数。

js编写缓慢回到顶部

书山有路

09-01

548

js直接回到顶部几种方法

weixin_67002441的博客

03-20

2140

js直接回到顶部几种方法

JavaScript 九九乘法表?

wxt_wjc的博客

01-11

902

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...

使用js实现返回顶部的缓速动画效果

热门推荐

object not found的博客

08-29

2万+

匀速效果在滚动条的滚动效果上交互不好看，我们可以使用缓动动画，可以利用定时器实现

js实现缓慢返回顶部

ABCD198643的博客

06-12

1055

1. //返回顶部let back=document.querySelector(".back");let duration = 500;back.onclick = function () { let l = document.documentElement.scrollTop; console.log(l); let s = l / 600 * 25; //路程...

实现底部top点击到顶部

weixin_30872337的博客

05-31

727

我这里用的很简单跟之前搜索之后跳到搜索结果位置一样锚点 <a class=" layui-icon layui-icon-up" href="#head" style="font-size: 32px;color: rgb(242, 246, 248);"></a> 然后有一个悬浮显示TOP .toolbars-footer{ position: abs...

CSS day12 移动端布局练习

qq_34620296的博客

09-13

1032

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...

js实现缓慢回到页面顶部

Bdbdbdnnd的博客

04-20

948

// 点击返回顶部 topclick() { var s=document.documentElement.scrollTop; // 定时器每10ms执行一次 timer=window.setInterval(function (){ // 每次走50 s-=50; // 到顶部后清除定时器必须清定时器不然就死循环了 if (s&l.

js实现点击按钮返回顶部

m0_74913905的博客

03-28

1252

利用html+css+JavaScript实现当往下滑动超过400像素后，显示按钮，点击可返回顶部，