首页 前端知识 jquery返回网站顶部方法大全

jquery返回网站顶部方法大全

2024-04-23 21:04:40 前端知识 前端哥 45 12 我要收藏

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5858.html
标签
数学建模
评论
发布的文章

【Java】JSONArray详解

2024-04-30 12:04:14

Unity——LitJSON的安装

2024-04-30 12:04:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!