jquery返回网站顶部方法大全

最新推荐文章于 2024-08-28 09:06:23 发布
最新推荐文章于 2024-08-28 09:06:23 发布
阅读量1.1k 收藏 1
点赞数 1
分类专栏： 技术文章 文章标签： jquery 数学建模 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/winkexin/article/details/131183438
版权
文章展示了如何使用JavaScript和jQuery创建网页返回顶部的功能，从基础版到基础升级版，再到兼容性版和小型插件版，逐步增强功能并优化用户体验，包括自动隐藏和显示，以及确保在不同浏览器中的兼容性。
摘要由CSDN通过智能技术生成

1、基础版，只带返回顶部功能

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <style type="text/css">

       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }

       .content { height: 2000px; border: 1px solid red; }

       #goToTop { position: fixed; bottom: 20px; right: 10%; }

      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }

     </style>

</head>

<body>

    <div>

        <div> 我是头部</div>

        <div>我是主内容，高度是2000px</div>

        <div>我是在最底部</div>

        <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>

    </div>

    <script>

    // 原始版

    $(function(){

        $('#goToTop a').click(function(){

            $('html , body').animate({scrollTop: 0},'slow');

        });

    });

    </script>

</body>

</html>

2、基础升级版，默认不显示，滚动到一定距离显示

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <style type="text/css">

       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }

       .content { height: 2000px; border: 1px solid red; }

       #goToTop { position: fixed; bottom: 20px; right: 10%; }

      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }

     </style>

</head>

<body>

    <div>

        <div> 我是头部</div>

        <div>我是主内容，高度是2000px</div>

        <div>我是在最底部</div>

        <div id="goToTop"><a href="javascript:;">点我返回顶部</a></div>

    </div>

    <script>

    // 改进版

    $(function(){

        $('#goToTop').hide();        //隐藏go to top按钮

        $(window).scroll(function(){

            // console.log($(this).scrollTop());

            //当window的scrolltop距离大于1时，go to

            if($(this).scrollTop() > 100){

                $('#goToTop').fadeIn();

            }else{

                $('#goToTop').fadeOut();

            }

        });

        $('#goToTop a').click(function(){

            $('html ,body').animate({scrollTop: 0}, 300);

            return false;

        });

    });

    </script>

</body>

</html>

3、兼容性版，加强浏览器兼容性

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <style type="text/css">

       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }

       .content { height: 2000px; border: 1px solid red; }

       #goToTop {position: absolute; right: -130px; z-index: 9000; }

      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #ff0; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }

     </style>

</head>

<body>

    <div>

        <div> 我是头部</div>

        <div>我是主内容，高度是2000px</div>

        <div>我是在最底部</div>

    </div>

    <script>

    // 加强版（兼容性基本完好）

    $(function(){

        //goToTop距浏览器顶端的距离，这个距离可以根据你的需求修改

        var topDistance = 500;

        //距离浏览器顶端多少距离开始显示goToTop按钮，这个距离也可以修改，但不能超过浏览器默认高度，为了兼容不同分辨率的浏览器，我建议在这里设置值为1；

        var showDistance = 1;

        //定义一个变量，方便后面加入在html元素标签中插入这个goToTop按钮的标签

        var goToTopButton = $('<div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>');

        var thisTop = $(window).scrollTop() + topDistance;

        //在container的div里插入我们前面定义好的html标签元素

        $('.container').append(goToTopButton);

        //设置goToTop按钮top的css属性和属性值

        $('#goToTop').css('top' ,thisTop);

        if($(window).scrollTop() < showDistance){

            $('#goToTop').hide();

        }

        // 给窗口绑定一个滚动事件，当窗口滚动条滚动时执行

        $(window).scroll(function(){

            // console.log($(this).scrollTop());

            thisTop = $(this).scrollTop() + topDistance;        //获取当前window向上滚动的距离

            $('#goToTop').css('top', thisTop);                    //修改goToTop按钮的top距离

            console.log(thisTop);

            if($(this).scrollTop() > showDistance){

                $('#goToTop').fadeIn();

            }else{

                $('#goToTop').fadeOut();

            }

        });

        // 给按钮绑定一个click事件，点击按钮时，返回顶部

        $('#goToTop a').click(function(){

            $('html ,body').animate({scrollTop: 0}, 300);

            return false;

        });

    });

    </script>

</body>

</html>

4、小型插件版

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

    <style type="text/css">

       .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; }

       .content { height: 2000px; border: 1px solid red; }

       #goToTop { position: fixed; bottom: 20px; right: 10%; }

      #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; }

     </style>

</head>

<body>

    <div>

        <div> 我是头部</div>

        <div>我是主内容，高度是2000px</div>

        <div>我是在最底部</div>

        <div id="goToTop"><a href="javascript:;">点我回到页面顶部</a></div>

    </div>

    <script>

    // 编写jQuery返回顶部插件

    jQuery.fn.goToTop = function(){

         

        // 判断如果窗口滚动距离小于0，隐藏按钮

        if($(window).scrollTop() < 0){

            $('#goToTop').hide();

        }

        // 窗口滚动时，判断当前窗口滚动距离

        $(window).scroll(function(){

            if($(this).scrollTop() > 1){

                $('#goToTop').fadeIn();

            }else{

                $('#goToTop').fadeOut();

            }

        });

        // 给这个按钮绑定一个click事件

        this.bind('click',function(){

            $('html ,body').animate({scrollTop: 0},500);

            return false;

        });

    };

    //调用这个插件

    $(function(){

        $('#goToTop').goToTop();

    });

    </script>

</body>

</html>

执刀人的工具库
关注
专栏目录
jQuery实现返回顶部
02-16
jQuery实现返回顶部
使用jQuery实现返回顶部
蚩尤煜的博客
04-12 509
目录前言效果图实现完整的style和body部分HTML代码 前言 最近要设计一个网页，想实现一个类似于菜鸟教程的返回顶部按钮，但找了很久都没找着合适的实现方法，最后自己结合菜鸟教程的设置和网上的其他一些设置，自己结合jQuery实现了这个功能。 希望能对你有所帮助。 效果图 点击右下角的小方块可以返回网页顶部 实现 首先设置一个贴附在网页右下角的div小块的css <style> .fixed-btn { position: fi
jQuery实现返回顶部按钮特效的代码教程
最新发布
weixin_32925455的博客
08-28 1240
本文还有配套的精品资源，点击获取 简介：本教程介绍如何使用jQuery库来创建一个返回页面顶部的交互式按钮特效。这一功能能够改善用户体验，当用户滚动到页面的某个位置时，通过点击按钮可以平滑地返回到页面顶端。实现这个功能需要包括创建按钮元素、设置CSS样式、绑定滚动事件、设置条件判断、添加动画效果以及代码优化等多个步骤。教程还可能包括一个代码压缩包，其中包含必要的HTML和J...
使用jQuery回到顶部
u_u2020的博客
08-26 622
我们这个的布局很简单，只需要一张图片和一个按钮。 我们将图片放在一个类名为div1的div里面，我们给这个div一些样式：width:1200px; margin:0 auto; 我们再在div外面放一个button按钮，我们给这个按钮写一下样式：width: 40px; height: 40px; right:35px; bottom:20px; display:none; background-image: url('../../Content/images/top_bg.png'); bac...
jQuery实现回到顶部
有点儿文绉绉的小赖的博客
07-26 707
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;回到顶部&lt;/title&gt; &lt;script type="text/javascript" src="js/jquery-1.8.3.js"&
jquery实现返回顶部功能
HusKiy的博客
10-31 2328
先来看看效果，当滚动的距离超过蓝色方块的时候，就会显示返回顶部的文字，这时候点击返回顶部就会自动返回顶部 <style> body { height: 2000px; } .back { position: fixed; width: 100px; height: 50px; right: 30px; .
Jquery实现回到顶部
时光依旧
06-12 861
Jquery实现回到顶部$('document').ready(function(){ var timer = null; //获取页面可视区域的高度 var clientHeight = $(window).height(); //鼠标向下滑动 $(window).scroll(function(){ var osTop = $(docume
jQuery实现返回顶部效果的方法
01-19
本文实例讲述了jQuery实现返回顶部效果的方法。分享给大家供大家参考。具体实现方法如下： 1、首先是CSS样式： /*updown*/ #shangxia{position:fixed;top:83%;right:42%;margin-right:-543px;display:block;_...
jquery 实现返回顶部功能
10-25
本文主要介绍如何使用jQuery结合原生JavaScript实现返回顶部的功能。 知识点一：HTML结构创建 要实现返回顶部功能，首先需要创建一个用于点击的按钮或链接。在本例中，创建了一个包含一个链接的`div`元素，该链接...
jQuery平滑返回顶部代码.zip
07-11
本资源“jQuery平滑返回顶部代码.zip”提供了一种实现这一功能的方法，利用了广泛使用的JavaScript库jQuery。接下来，我们将深入探讨jQuery平滑返回顶部代码的工作原理、实现方式以及如何在实际项目中应用。 首先，...
木蚂蚁网站jQuery返回顶部.zip
07-11
在"木蚂蚁网站jQuery返回顶部"这个例子中，我们看到的是木蚂蚁官方网站采用的特定jQuery实现的这种功能。 首先，让我们了解一下jQuery库。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
jquery实现返回顶部
04-11
当网页内容过多，导致页面过长时可以方便返回顶部
JQuery实现返回顶部
Marco_30的博客
02-28 358
<!DOCTYPE html> <html lang="en"> <head> <style> #back-to-top{ position:fixed;display:none; bottom:100px; right:80px;} #back-to-top a{ text-align:center; text-decoration:none; color:red; display:block; width:64px;} #back-to-
返回顶部链接效果--jQuery实现
岁寒松柏
10-26 540
jQuery返回顶部（查看示例） 一、HTML（基本结构） 返回顶部 有了上面的html后，当我们点击”返回顶部”这个链接时，就会自动跳转到body标签的位置，也就是页面的顶部。 二、CSS（样式化） 之所以在上面html代码的标签中添加一个空的标签，目的是为了创建我们预想的返回顶部链接样式，如下图： 接下来我们需要使用position ： fix
jquery点击回到顶部
寂寞的天空的博客
02-09 399
顶部  top JavaScript"> $(function(){   $("#top").click(function() {       $("html,body").animate({scrollTop:0}, 500); //angular写法 //angular.element("html,body").animate({scrol
很好用的返回顶部代码
前端和PHP学习
11-04 762
需要调用Jquery文件哦 JS代码如下： jQuery(document).ready(function ($) { $('.rtTop h4 img').hover(function () { $(this).stop().animate({ "top": "-43px" }, 200) }, function () { ...
JQuery实现回到顶部
热门推荐
朱登凯的专栏
05-12 1万+
当一个页面的内容比较长时，一般都在页面的右下角的固定位置有个“回到顶部”的按钮，点击后，页面的滚动条逐渐回滚到顶部，本篇来描述一个它的实现过程。 首先，需要有一个按钮<button id="btn_top" title="回到顶部"> 回到顶部 </button>然后给这个元素定位到右下角，我们使用position：fixed。下面这个按钮加一些最基本的样式#btn_top { p
jquery经典实例之回到顶部
编程界明世隐的博客
12-07 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="GBK"> <title>回到顶部</title> <style> .divA { height: 1500px; } .divB { width: 50px; heigh.
使用 JQuery 返回页面顶部
快雪时晴天的专栏
09-30 648
在特别长的页面中设置一个按钮，点击后可以自动返回页面最顶端，代码如下： 落帆亭博客专注web前端开发 返回顶部 $(".top-link").click(function(){ $('body,html').animate({scrollTop:0},1000); return false; });
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

执刀人的工具库

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值