• 滚动


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="jq1.6.js"></script>

    <title>无标题文档</title>

    </head>

    <body style="height:5000px;background:#CCC">

    <style>

    *{margin:0;padding:0;border:none}

      #jumpbar{400px; margin:0 auto; background:url(http://www.7gege.com/template/shop/images/jumpbar.gif) no-repeat; height:179px; position:absolute; left:20px}

      #jumpbar a { display:block; 25px; height:25px;  }

      </style>

       <div id="jumpbar">

          <a href="javascript:void(0)"></a><a href="javascript:void(0)"> <a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a><a href="javascript:void(0)"></a>

          </div>

        <script>

            $(function(){

    var _go = [0,1017,1556,2205,3090,3968,$(document).height()];

      var $jumpbar = $("#jumpbar"),

                    $window = $(window),

                    offset = $jumpbar.offset(),

                    topPadding = 100,

    jL = $("#jumpbar a").length;

                $(window).scroll(

                        function()

                        {

                            if($window.scrollTop() > offset.top)

                            {

                                $jumpbar.stop().animate(

                                        {

                                            top:$window.scrollTop()-offset.top + topPadding

                                        },500

                                );

                            }

                            else

                            {

                                $jumpbar.stop().animate(

                                        {

                                            top:0

                                        }

                                )

                            }

                        }

                )

    for(var i = 0; i <jL;i++)

    {

    $("#jumpbar a:nth-child("+(i+1)+")").bind("click",function(i){ return function(){$("html,body").stop().animate({scrollTop:_go[i]},500)}}(i),false);

    }

            });

        </script>  

        <div style="height:4000px; background:#999;"    ></div>

    </body>

    </html>

  • 相关阅读:
    D3js-实现图形拖拽及双击恢复
    D3js-三种图表tooltip提示框总结介绍
    D3js-API介绍【英】
    D3js-API介绍【中】
    springboot 整合 activemq 同时使用点对点模式和发布订阅模式
    docker 安装 activemq
    nginx 配置websocket 400 问题
    springboot +vue 整合websocket 403
    m3u8下载器
    linux scp 命令
  • 原文地址:https://www.cnblogs.com/jinbiao/p/2152148.html
Copyright © 2020-2023  润新知