开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

制作返回顶部jquery

基础概念

"返回顶部"（Back to Top）是一个常见的网页功能，允许用户点击一个按钮快速滚动到页面顶部。这个功能通常用于长页面，以提高用户体验。

相关优势

提高用户体验：用户可以快速返回页面顶部，无需手动滚动。
减少页面跳转：用户不需要通过浏览器的返回按钮或手动输入URL来返回顶部。
设计美观：可以自定义按钮样式，与页面设计风格统一。

类型

固定位置按钮：按钮始终固定在页面右下角。
滚动触发按钮：当用户滚动到一定位置时，按钮才显示。

应用场景

长篇文章或博客
电子商务网站的产品列表页
任何长页面

示例代码

以下是一个使用jQuery实现返回顶部功能的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>返回顶部示例</title>
    <style>
        #back-to-top {
            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;
        }

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

<div style="height: 2000px;">
    <!-- 页面内容 -->
</div>

<button id="back-to-top" title="返回顶部">Top</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(window).scroll(function(){
            if ($(this).scrollTop() > 100) {
                $('#back-to-top').fadeIn();
            } else {
                $('#back-to-top').fadeOut();
            }
        });

        $('#back-to-top').click(function(){
            $('html, body').animate({scrollTop : 0},800);
            return false;
        });
    });
</script>

</body>
</html>

解释

HTML部分：创建一个按钮，ID为back-to-top。
CSS部分：设置按钮的样式，使其固定在页面右下角，并设置悬停效果。
JavaScript部分：
- 使用$(window).scroll()监听窗口滚动事件。
- 当滚动距离超过100像素时，显示返回顶部按钮；否则隐藏按钮。
- 点击按钮时，使用$('html, body').animate()方法平滑滚动到页面顶部。

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

按钮不显示：
- 确保jQuery库已正确引入。
- 检查CSS样式是否正确应用。
- 确保滚动距离设置正确。

按钮点击无效：
- 确保jQuery选择器正确，能够选中按钮元素。
- 检查animate()方法是否正确调用。

通过以上步骤，你可以实现一个简单且有效的返回顶部功能。

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

有帮助

没帮助

相关·内容

jQuery点击返回顶部

顶部" style="width: 50px;"...function(){ //创建一个变量存储当前窗口下移的高度 var scroTop = $(window).scrollTop(); //判断当前窗口滚动高度 //如果大于100，则显示顶部元素...，否则隐藏顶部元素 if(scroTop>100){ $('.backtop').fadeIn(500); }else{ $('.backtop').fadeOut(500)...; } }) }) //为返回顶部元素添加点击事件 $('.backtop').click(function(){ //将当前窗口的内容区滚动高度改为0，即顶部

8.3K4 0

Jquery实现一键返回顶部

一、需求分析当用户浏览的网页过于长的时候，用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部，不仅麻烦，而且用户体验也会很差。...现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮，点击它可以使页面返回顶部，用户再也不用滚动滚轮了。下面本站的返回顶部的效果，分享给大家： ?...pointer; display: none; } #Back-to-the-top .layui-icon { font-size: 50px; color: #333; } Jquery...代码： // 返回顶部 window.onscroll = function() { scrollTop = document.documentElement.scrollTop || window.pageYOffset

2.4K3 0

返回顶部案例

带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...当我们点击了返回顶部模块，就让窗口滚动的页面的最上方 goBack.addEventListener('click', function() { // 里面的x和

2.3K3 0

移动端返回顶部

当页面滚动某个地方，就显示返回顶部图标，否则隐藏点击可以返回顶部实现代码跟pc端一致案例分析：滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...）大于某个数值点击，window.scroll(0,0) 返回顶部 //返回顶部模块制作 var goBack = document.querySelector( '.goBack' );

2K4 0

返回顶部插件 Toptop

插件简介 Typecho的主题很多都没有带有自动返回顶部功能，可能也是这个原因，有人按耐不住开发了这个返回顶部功能的插件TopTop，该插件自带两个主题样式。

2K4 0

jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）

承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》，本文将对前一篇的代码进行优化。...DOCTYPE HTML> jquery.com/jquery-1.7.1.min.js"> var scrollTT = { tTSpeed : 800, // 滚动到顶部的时间...火箭起飞的时间 restartTime : 1200, // 重置火箭位置的时间 flySpeed : 50, // 火箭向上飞行的速度 obj : $("#backtotop"), // 回到顶部的

1.8K6 0

js实现返回页面顶部

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

9K1 0

仿淘宝返回顶部案例

.案例：返回顶部带有动画的返回顶部此时可以继续使用我们封装的动画函数只需要把所有的left 相关的值改为跟页面垂直滚动距离相关就可以了页面滚动了多少，可以通过 window.pageYOffset...当我们点击返回顶部模块，就让窗口滚动到页面的最上方 goBack.addEventListener("click", function () { // 里面的x 和 y 不跟单位的

1.8K2 0

移动端返回顶部案例

1.案例：返回顶部当页面滚动某个地方，就显示，否则隐藏点击可以返回顶部 2.案例分析滚动某个地方显示事件：scroll页面滚动事件如果被卷去的头部（window.pageYOffset...）大于某个数值点击，window.scroll(0,0) 返回顶部 // 返回顶部模块制作 var goBack = document.querySelector(".goBack")

2K2 0

前端中返回顶部功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 ...

1.9K2 0

jQuery仿极客公园火箭发射“返回顶部”效果（WordPress代码篇）

前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章，如果你是Word-Press 老手，肯定知道如何移植到WordPress主题中；本文针对的是新手，如果你想在你的WordPress...建议先看一下下面的文章——如果你还没有看过的话：《 jQuery仿极客公园火箭发射“返回顶部”效果（初始篇）》《 jQuery仿极客公园火箭发射“返回顶部”效果（优化篇）》教程如下（代码来源于...一加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；二在主题的footer.php 的适当位置添加以下代码：放在footer.php中： var scrollTT = { tTSpeed : 800, // 滚动到顶部的时间...火箭起飞的时间 restartTime : 1200, // 重置火箭位置的时间 flySpeed : 50, // 火箭向上飞行的速度 obj : $("#backtotop"), // 回到顶部的

2.1K7 0

类极客公园火箭发射“返回顶部”jQuery效果（WordPress代码教程）

之前在三篇系列文章《jQuery仿极客公园火箭发射“返回顶部”效果》中已经给出了“仿”的教程，今天分享也是一个火箭发射“返回顶部”的效果，不过这个火箭更加肥胖了点。...一加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；二在主题的footer.php 的适当位置添加以下代码： <div style="display: none;" id="rocket-to-top

1.7K6 0

jQuery实现回顶部效果

timer = setInterval(function(){ distance -= itemDistance //到达顶部

3.9K2 0

jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

说在前面：在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。...语法： $(selector).scroll() 应用：我们监听滚动事件，放滚动到 400px 时，出发显示返回顶部标签，然后给该标签，绑定一个事件，点击返回顶部。...HTML部分：返回顶部 CSS部分： body{ height: 2000px; } .goTop{ position...); } else { $('.goTop').fadeOut(); } }) /*点击返回顶部

7.9K3 0

CSS3形式返回顶部

返回顶部按钮很多站都有，实现方法也很简单，这次分享一个效果不太一样的：图标采用CSS3形式，页面返回时会有弹簧效果。效果来源于给力壁纸的作者博客。哎，嘴笨，大家看看本页面的效果就明白啦。....scrollTo=function(a,b,c){$(window).scrollTo(a,b,c)};h.defaults={axis:'xy',duration:parseFloat($.fn.jquery...a:{top:a,left:a}}})(jQuery); $(function($){ var backToTopItem = $("#back-to-top"); backToTopItem.click

1.4K2 0

js点击按钮返回页面顶部

2016-08-22 03:08:28 在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮...，点击该按钮返回顶部，并且有一定的效果。...该方法就是利用锚点的方式来返回顶部。即给最顶部的div设置一个id，然后a标签的链接地址写成该id，当点击时就会返回顶部，但是缺点为过于突兀，因为是立即返回顶部。...="top-link" href="#">返回顶部 $(".top-link").click(function(){ $('body,html').animate(...scrollTop:0},1000); return false; }); a标签的样式和方式和第一种方式相同，只不过给其添加了一个点击事件，此事件需要进入jquery.js

32.4K1 0

网站经典功能之返回顶部

但是当他想返回页面顶部进行其他操作时，他可能需要不断滚动鼠标滚轮，这就导致用户体验将很差。鉴于这种情况， “回到顶部”这一功能便出现了。站长源码网 2....返回顶部代码示例 ---- div.box { height: 1000px; background-color: aqua; margin-bottom: 20px; } div#gotop

1.2K1 0

返回顶部和回到底部

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

9381 0

返回到顶部按钮实现

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

2.3K10 0

jquery顶部固定层下拉导航

最近有人在论坛里讨论怎么制作导航菜单！我关注了一下，这里就写了一个简单的demo。供大家参考。代码如下： jquery...顶部固定层下拉导航 @charset "utf-8"; /* CSS Document */ html,*,body.../1.10.2/jquery.min.js"> $(function(){ $("#navul...script> 返回首页

5.8K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭