开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

原生js实现回到顶部

基础概念

回到顶部（Scroll to Top）功能允许用户通过点击一个按钮快速返回到页面的顶部。这个功能在长页面中尤其有用，可以提升用户体验。

实现方式

使用原生JavaScript实现回到顶部功能主要涉及以下几个步骤：

创建一个按钮元素。
监听按钮的点击事件。
在点击事件中，使用window.scrollTo方法将页面滚动到顶部。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll to Top Example</title>
    <style>
        #scrollToTopBtn {
            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;
        }

        #scrollToTopBtn:hover {
            background-color: #777;
        }
    </style>
</head>
<body>

<button id="scrollToTopBtn" title="Go to top">Top</button>

<div style="height:2000px;">
    <!-- Your content here -->
</div>

<script>
    // Get the button
    let mybutton = document.getElementById("scrollToTopBtn");

    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
        } else {
            mybutton.style.display = "none";
        }
    }

    // When the user clicks on the button, scroll to the top of the document
    mybutton.onclick = function() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    };
</script>

</body>
</html>

优势

提升用户体验：使用户能快速返回页面顶部，特别是在长页面中。
简单易实现：使用原生JavaScript编写，无需依赖外部库或框架。
性能良好：直接操作浏览器原生API，执行效率高。

应用场景

新闻网站：文章页面较长，用户可能需要多次返回顶部查看不同部分。
电商网站：产品列表页或详情页内容丰富，用户浏览后可能需要回到顶部继续浏览其他产品。
企业官网：介绍页面较长，方便用户随时回到顶部查看导航栏。

可能遇到的问题及解决方法

问题1：滚动效果不平滑

原因：未设置behavior: 'smooth'属性。
解决方法：在window.scrollTo方法中添加behavior: 'smooth'属性。

问题2：按钮显示/隐藏逻辑错误

原因：滚动事件处理函数逻辑不正确。
解决方法：确保滚动事件处理函数正确判断页面滚动位置，并相应地显示或隐藏按钮。

通过以上步骤和示例代码，您可以轻松实现一个原生JavaScript的回到顶部功能，并确保其在各种场景下都能良好运行。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

js回到顶部

回到顶部 <!...position: fixed; bottom: 10px; } 回到顶部

1.7K2 0

返回到顶部按钮实现

50px; cursor:pointer; } function goTop() { $(window).scroll(function(e) { //若滚动条离顶部大于

1.6K10 0

JS 吸顶导航，告别“回到顶部”

本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方...HTML5学堂是一个热爱H5的讲师组成的组织，致力于构建一个前端、HTML5的分享平台，能够给学生提供一些资料，也为广大前端爱好者提供一个分享平台，其中涉及到的基本知识，JS...底层知识，JS底层知识，面试真题、相关技术、未来发展等。...二、吸顶功能添加 1.实现思路是监听 scroll 事件，判断当前页面的滚动位置，当滚动距离大于导航条距顶部的距离时，为导航条采用窗口定位。...2.与“回到顶部“的实现方法一样，但是会发现实现吸顶功能时，到了临界位置时，页面会抖动一下，因为当导航条fixed出去，下部内容填补了导航条离开的位置。抢占了导航条的位置，所以抖动了一下。

7.7K7 0

【前端】回到顶部

1552 0

基于JS实现回到页面顶部的五种写法(从实现到增强)

写法【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。...该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置　　[注意]关于锚点的详细信息移步至此 <body style="...元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度　　由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能... 3】scrollTo() 　　scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角　　设置scrollTo(0,0)可以实现回到顶部的效果...script> 4】scrollBy() 　　scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量　　只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果

6K2 1

页面返回顶部代码_网页回到顶部代码

具体代码如下：回到顶部” href=”#”> 回到顶部对，你没看错，就这么简单的一句代码，直接在 a 标签中，填写一个三角号。...#回到顶部 span{ display:block; width:60px; color:#dddddd; } #回到顶部 span:hover{ color:#cccccc; } #gotop...({scrollTop:”0px”},200); }); }); 还要下载个回到顶部的图片上传网站根目录里！...当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。...3种，就是也很简单了，现在都有很多网站用的插件：友荐，自带返回顶部的JS 你只要是网站的拥有者，到上面去申请个号，复制它的代码，这我就不写了。很短的一段代码，复复制进自己的文章内容页：就可以了。

3.2K4 0

返回顶部和回到底部

经常会有返回顶部、回到底部的需求，推荐一种比较简单的写法 JQ中有 scrollTop() 方法可以帮助我们快速实现该需求示例：测试返回 js.../script> function test(){ $(".div1").scrollTop(0);//此为滚动条的位置--返回顶部

1711 0

利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能，现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。...ID”就可以实现回到顶部的功能了，不过如果是这种方法的话就不会出现那种滑动的效果，交互性不太好。...下面在介绍一种可以实现滑动的回到顶部功能，并且可以自己设置滑动的速度和回到顶部的位置等。推荐大家用这种模式实现回到顶部的功能，下面来实现的例子。...$('body,html').animate({ scrollTop: 0 }, speed); return false; }); 通过写一段js...代码就可以实现回到顶部的功能了，是不是特别简单啊。

1.5K7 0

弹幕和回到顶部前端web

弹幕和回到顶部前端web 弹幕 1.效果演示 ceshi.gif 2.相关代码 js"> *{ margin: 0;...input[type='button']").click(); } }); }) 2.回到顶部.../jquery-1.9.1/jquery-1.9.1/jquery.js"> div{ width: 100%;

1.1K3 0

Octopress添加回到顶部功能

在Octopress当阅读到文章底部的时候，或多或少都想回到顶部，而默认的Octopress没有提供回到顶部的功能，于是一不做二不休，自己找个控件加上。...现成的资源 Scroll To Top 这个网站提供了数十种回到顶部的样式。你可以根据自己的需要，添加所中意的widget。...custom/scroll_to_top.html 1 2 js... 注意，默认Octopress引入了jquery.min.js，所以没有必要再次引入。引入代码回到顶部功能，不仅仅要在文章页生效，同时也需要对类似归档页面有效才完美。...到这里，你已经完成了一个可以秒杀新浪微博的回到顶部的功能啦，恭喜哈。

6461 0

js实现返回页面顶部

无动态效果 1、原生JS window.scrollTo(0,0); 2、jQuery $(window).scrollTop(0); 有动态效果 1、原生JS function smoothscroll...return false; } $('body').animate({scrollTop:0},200); return false; 注意：将代码放入click事件的函数，或者执行函数，就能执行，返回顶部

6.4K1 0

点击状态栏回到顶部

可我们有时却会发现此功能不能使用，即我们如何点击状态栏都不能让表格回到顶部。出现这种情况可能是我们犯了一些错误。...要想有“点击状态栏回到顶部”这个功能是有条件的，即当前视图上只有一个让系统可以识别的滚动视图－scrollView（tableView也是属于scrollView），因为系统要知道哪个滚动视图需要实现“...点击状态栏回到顶部”功能。...如果当前视图只有一个滚动视图，那很好，点击状态栏必定会实现“点击状态栏回到顶部”功能。...我们需要将scrollView的scrollsToTop属性设置为NO，这样就能实现“点击状态栏回到顶部”功能了。

1.5K1 0

关于Android PullTorefreshScrollview回到顶部实例

列表滑动下面显示按钮，点击按钮回到顶部的功能，一般scrollview会有滑动监听的事件，通过setOnScrollChangeListener()滑动监听滑动的距离来判断是否显示按钮就好了，但是PullTorefreshScrollview

9459 0

vue+element-ui 回到顶部组件

https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpack+element-ui，需要一个回到顶部的通用组件...JavaScript部分这里是重点了，主要是监听两个事件：屏幕滚动事件回到顶部按钮的点击事件屏幕滚动事件 code： mounted() { this....this.toTopShow = true; }else { this.toTopShow = false; } }, 这里需要注意的地方是：一开始不必将回到顶部按钮显示出来...，等用户将页面往下滑动一段距离之后再显示回到顶部按钮，这样更加符合用户的操作习惯回到顶部按钮的点击事件 code： scrollToTop() { let timer = null;...this.toTopShow = false; } }); } 这里需要主要几点：使用requestAnimationFrame，优点就不必多说了正常情况下回到顶部的速度是由快变慢的

5.4K2 0

博客园【装饰目录、回到顶部】

前言 1、进入你的博客园点击： image.png 2、然后跳转到下图： image.png 申请JS 首先你要去自己的设置,申请js权限 image.png 申请成功以后才可以做一下内容目录...页首HTML代码 /* 功能：生成博客目录的JS工具测试：IE8，火狐，google测试通过孤傲苍狼...sideBarContents dd:hover, dt:hover { color:#A7995A; } #sideBarContents dd{ margin-left:20px; } 回到顶部...页面定制CSS代码 /*回到顶部*/ #back-to-top123 { background-color: #00CD00; bottom: 0; box-shadow: 0...position: fixed; right: 50px; cursor: pointer; } 页脚HTML代码回到顶部

1K1 0

全代码打造简洁美观回到顶部按钮

这次，潜行者m给大家带来一个比较实用的 jQuery 技巧，为你的网站添加一个纯代码画出来的、简洁美观的回到顶部按钮。...这个按钮的效果就是，当页面滑动一段距离之后，就会浮现出来这个按钮，点击这个按钮之后，就自动滚动到顶部。点击之后就会跳转到顶部，然后这个按钮平滑消失。...必须加上stop()停止之前动画,否则会出现闪动 } }); $("#gotop").click(function(){ //当点击标签的时候,使用animate在200毫秒的时间内,滚到顶部...当然缺点也是有的，就是在IE6等过时的浏览器中，可能不会兼容，无法实现。 ----

8043 0

点击按钮，回到页面顶部的5种写法

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能...script> 8 3.scrollTo:scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角,设置scrollTo(0,0)可以实现回到顶部的效果...script> 8 4.scrollBy():scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量,只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果...【1】显示增强使用CSS画图，将“回到顶部”变成可视化的图形(如果兼容IE8-浏览器，则用图片代替) 使用CSS伪元素及伪类hover效果，当鼠标移动到该元素上时，显示回到顶部的文字...，滚动条以一定的速度回滚到顶部动画有两种：一种是CSS动画，需要有样式变化配合transition；一种是javascript动画，使用定时器来实现　　在上面的5种实现中，scrollTop

2.7K3 0

js返回顶部

---- 回到顶部 Document js.../jquery/2.0.2/jquery-2.0.2.min.js"> #gotoTop { box-sizing: border-box;...> 返回顶部返回顶部返回顶部返回顶部 js....animate({ scrollTop: 0 }, 700); }).hover( // 为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现 function()

4.4K3 0

js 返回页面顶部的实现( layui)

js代码 // 点击按钮，返回顶部 function topFunction() { document.getElementsByClassName('layui-body')[0].scrollTop... 顶部...">返回顶部 ...锚点位置: 顶部">返回顶部

5K2 0

CSS加JS实现网页返回顶部功能

通常我们都需要一个返回顶部的功能来实现快速来到网页顶部。当然实现方式不止一种，这里我采用的最实用的一种。使用CSS+Jquery方式代码量相对较少，容易理解。...实现原理 1.我们需要再DOM中添加自己的DIV，里面包含一个a标签，a标签里面包含两个img标签用于存放返回顶部的图片。...2.添加必要的CSS样式 3.然后通过JS代码实现当网页滚动100px以下，返回顶部的图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变的效果。 4.当点击a标签时，JS实现延迟滚动网页到顶部。...实现效果代码 <!...$("#go-to-top").fadeOut(1000); } }); //点击图标回到页面顶部

6.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭