开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jquery返回顶部底部特效

基础概念

jQuery 返回顶部和底部特效是一种常见的网页交互功能，允许用户通过点击按钮快速滚动到页面的顶部或底部。这种特效通常用于长页面，以提高用户体验。

相关优势

提高用户体验：用户可以快速导航到页面的顶部或底部，无需手动滚动。
简洁直观：按钮设计通常简洁，易于理解和操作。
响应式设计：可以轻松适应不同屏幕尺寸和设备。

类型

返回顶部：用户点击按钮后，页面滚动到顶部。
返回底部：用户点击按钮后，页面滚动到底部。

应用场景

长篇文章或文档
电子商务网站的产品列表页
社交媒体平台的长动态列表

实现方法

以下是一个简单的 jQuery 返回顶部和底部特效的示例代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 返回顶部底部特效</title>
    <style>
        #back-to-top, #back-to-bottom {
            display: none;
            position: fixed;
            padding: 10px;
            background-color: #007bff;
            color: white;
            cursor: pointer;
            border-radius: 5px;
        }
        #back-to-top {
            bottom: 20px;
            right: 20px;
        }
        #back-to-bottom {
            top: 20px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div style="height: 2000px;">
        <!-- 页面内容 -->
    </div>
    <button id="back-to-top">返回顶部</button>
    <button id="back-to-bottom">返回底部</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;
            });

            // 显示/隐藏返回底部按钮
            $(window).scroll(function() {
                if ($(this).scrollTop() < $(document).height() - $(window).height() - 100) {
                    $('#back-to-bottom').fadeIn();
                } else {
                    $('#back-to-bottom').fadeOut();
                }
            });

            // 返回底部按钮点击事件
            $('#back-to-bottom').click(function() {
                $('html, body').animate({ scrollTop: $(document).height() }, 800);
                return false;
            });
        });
    </script>
</body>
</html>

常见问题及解决方法

按钮不显示：
- 确保 jQuery 库已正确加载。
- 检查 CSS 样式是否正确应用。

按钮点击无效：
- 确保 jQuery 选择器正确。
- 检查 JavaScript 代码是否有语法错误。
动画效果不流畅：
- 调整 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，即顶部

6.1K4 0

返回顶部和回到底部

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

1711 0

jQuery实现返回顶部功能

整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图第一种实现一、JSP或HTML(主体结构) 在body中添加 <p id="back-to-top...{ background: #979797 url(/img/back_to_top.png) no-repeat center center; } 图片自己网上找资源三、jQuery...document).ready(function() { //首先将#back-to-top隐藏 $("#back-to-top").hide(); //当滚动条的位置处于距顶部...{ $("#back-to-top").fadeOut(1500); } }); //当点击跳转链接后，回到页面顶部位置...opacity: .6; filter: Alpha(opacity = 60); } (function() { var $backToTopTxt = "返回顶部

2K3 0

一句jQuery代码返回顶部

大家好，又见面了，我是全栈君一句jQuery代码返回顶部效果体验： http://hovertree.com/texiao/yestop/ 使用方法：只需引用jQuery库和YesTop插件，然后一句代码就可以实现返回顶部...：引用代码： jquery/jquery-1.11.3.min.js">... jquery.yestop.js.../jquery-1.11.3.min.js"> jquery.yestop.js"> body { margin: 0px;font-family

1.1K1 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

1.7K3 0

给WordPress博客添加返回顶部和底部的教程

给WordPress博客添加返回顶部和底部的教程 ---- 今天就给大家分享下返回顶部那块的制作教程，其实也不难，主要是用到html、css和一些jq代码。...); }); $('.gotop-pop-box-close').click(function() { $('.gotop-pop').hide() }); 以上代码依赖jquery...，请确保你的博客已经加载jquery文件。...代码比较长，可以直接点击复制） /* * ------------------------------------------------------------------------------ * 返回顶部样式

5323 0

这个站点返回顶部返回底部好不好看原创 XiunoBBS

如图： image.png 移动端自动隐藏

6311 0

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

今天给大家介绍一下如何利用JQuery实现从任意地方返回顶部的功能，现在大部分网站因为篇幅比较长，所以都会设置这么一个按钮，利用这个按钮可以实现从底部返回顶部的功能。...src="images/weixing-ma.jpg"> 顶部的一个... 这第一个方法比较简单，就是在超链接中写上“#顶部的...ID”就可以实现回到顶部的功能了，不过如果是这种方法的话就不会出现那种滑动的效果，交互性不太好。...下面在介绍一种可以实现滑动的回到顶部功能，并且可以自己设置滑动的速度和回到顶部的位置等。推荐大家用这种模式实现回到顶部的功能，下面来实现的例子。

1.5K7 0

jQuery特效 | 导航底部横线跟随鼠标缓动

HTML5学堂（码匠）：jQuery来实现如下特效 - 在导航底部存在一条横线，跟随着鼠标缓动到相应导航项底部。...今天就针对该特效来说说如何开发（本次内容使用jQuery进行讲解，原生JavaScript代码下周一奉上）功能效果图 ?...hover事件 hover事件是jQuery中的事件，不存在于原生JavaScript当中，是mouseover（鼠标移入）与mouseout（鼠标移出）的功能综合体； hover事件的基本语法为：...offsetLeft是JavaScript原生方法，ele.offsetLeft中，ele表示具体元素，元素的offsetLeft属性，表示该元素左侧与父级元素的距离； position()方法是jQuery...Plus：如果希望对this以及offsetLeft做详细了解，可以在文章底部点击相关链接，查看相应文章。

8.7K5 0

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式二）

之前发表过一种样式的“返回顶部、返回底部、评论”效果，今天在这里分享Devework.com目前使用的效果：一个博客侧边滑动，返回顶部，查看评论的小工具，作为WordPress等博客专用。...教程如下：一、确保你的主题已经加载jQ库，然后将以下js代码以gototop.js文件保存，放在主题的目录下： jQuery(document).ready(function($) { $body...>/js/gototop.js"> 返回顶部"> 底部"> /js/gototop.js需要改为与你的实际路径。

1.6K9 0

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果（样式一）

本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧？一般你在各大网站的右下角都能看到类似的东东，但许多网站都普遍只有“返回顶部”的效果。...本站将陆续发表几篇文章提供这几类“返回顶部、返回底部、评论”的添加方法（教程），今天提供的是在Jeff的阳台中使用的，效果如下： ? ? 你也可以到Jeff的阳台查看效果。...此“返回顶部、返回底部、评论”效果没有像本站使用的js滑动特效，但影响不大。如果你在意这个，你也可以等待后续文章更新。具体的黑色是通过css定义的，你可以改成你需要的颜色。...div id="sticky-nav"> 返回顶部...gobtm" onclick="window.scrollTo(0,document.body.scrollHeight);return false;" href="#colophon"> 前往底部

1.3K7 0

css实现返回顶部,实现返回顶部效果

实现的效果如下可以点击它返回到首页去 html部分 title=”返回顶部”> css部分 .layui-fixbar { position: fixed; right: 15px; bottom...v=240) format(‘truetype’); } 字体就是Layui里边的，网上下载即可： js部分//回到顶部 $(“#to_top”).click(function () { $(“html...0 }, 200); }); $(document).scroll(function () { var scroll_top = $(document).scrollTop(); //高度多少出现返回顶部

2.1K2 0

js返回顶部

返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部 ...返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部...返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部返回顶部 jquery.min.js...将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click( // 定义返回顶部点击向上滚动的动画

4.4K3 0

返回顶部案例

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

1.4K3 0

返回顶部插件 Toptop

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

1.4K4 0

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

某年某月，Jeff在极客公园游览时，看见了其右下角的“返回顶部”效果。点一下，小火箭呼啦就上去了。我是那个喜欢啊，马上右键“审查元素”，希望能将源代码扒出来运用在自己的主题中。...现在将分多篇文章转载这些精华，版权归原作者所有啊~ 先给出个演示Demo：演示地址以下来自andyliu，全文转载：最近在网络中游荡的时候发现极客公园的回到顶部的小火箭效果很棒 so~~~模仿一下...首先我们先把极客公园的回到顶部需要的图片下载到本地 ?...DOCTYPE HTML> jquery.com/jquery-1.7.1.min.js...DOCTYPE HTML> jquery.com/jquery-1.7.1.min.js"> <

1.5K8 0

移动端返回顶部

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

1.3K4 0

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

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

1.3K6 0

前端中返回顶部功能

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

1.3K2 0

仿淘宝返回顶部案例

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

1.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭