前端插件之锚点动画跳转

刺骨的言语ヽ痛彻心扉 2022-06-09 07:43 232阅读 0赞

1.js代码

2.html代码

<body>
    <div class="indexnav_wrap">
      <ul class="index_nav">
        <li><a href="javascript:void(0)" title="1"><i>活动</i><strong>1</strong></a></li>
        <li><a href="javascript:void(0)" title="2"><i>活动</i><strong>2</strong></a></li>
        <li><a href="javascript:void(0)" title="3"><i>活动</i><strong>3</strong></a></li>
        <li><a href="javascript:void(0)" title="4"><i>活动</i><strong>4</strong></a></li>
        <li><a href="javascript:void(0)" title="5"><i>活动</i><strong>5</strong></a></li>
      </ul>
    </div>
    <div class="h50"></div>
    <div class="row" id="main">
      <h2 id="index_1">这是第一个活动页</h2>
     
      <div class="mainpage mainpage1">
        </div>
     
    </div>
    <div class="h15"></div>
    <div class="row">
      <h2 id="index_2">这是第二个活动页</h2>
     
      <div class="mainpage mainpage2">
       
        </div>
     
    </div>
    <div class="h15"></div>
    <div class="row">
      <h2 id="index_3">这是第三个活动页</h2>
     
      <div class="mainpage mainpage3">
       
        </div>
     
    </div>
    <div class="h15"></div>
    <div class="row">
      <h2 id="index_4">这是第四个活动页</h2>
     
      <div class="mainpage mainpage4">
       
        </div>
     
    </div>
    <div class="h15"></div>
    <div class="row">
      <h2 id="index_5">这是第五个活动页</h2>
     
      <div class="mainpage mainpage5">
       
        </div>
     
    </div>
    <div id="tbox">
        <a class="taoba" href="javascript:void(0)" title="1">1</a>
        <a class="taoba" href="javascript:void(0)" title="2">2</a>
        <a class="taoba" href="javascript:void(0)" title="3">3</a>
        <a class="taoba" href="javascript:void(0)" title="4">4</a>
        <a class="taoba" href="javascript:void(0)" title="5">5</a>
        <a id="gotop" href="javascript:void(0)" title="回到顶部">回到顶部</a> 
    </div>
    </div>
    </body>

3.css部分

@charset "utf-8";
    /* CSS Document Download by http://www.codefans.net*/
    .gray {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
    }
    /* reset */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, p , form, fieldset, legend, input, button, textarea, th, td {
        margin:0;
        padding:0;    
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    fieldset, img {
        border:0;
    }
    ul,li {
        list-style:none;
    }
    body {
        background: #f1f1f1;
        color: #666;
        font:12px/1.7 Helvetica,Arial,Tahoma,sans-serif,"\5B8B\4F53";
    }
    .row:after {
        clear:both;
        content:'\0020';
        display:block;
        height:0;    
    }
    .row {
        zoom:1;
    }
    /*链接颜色*/
    a,button{outline:none; /*移除虚线框  IE8,FF有用*/ hide-focus: expression(this.hideFocus=true); /*IE6、IE7*/}
    a{
        color:#999;
        text-decoration:none;
    }
    a:hover{
        color:#be0000;
        text-decoration: underline;
    }
    .fst{
        font-family: "\5B8B\4F53";
    }
    h1,h2,h3,h4,h5,h6{font-family:\5FAE\8F6F\96C5\9ED1; font-size: 16px;}
    /* end reset */
    .row{
        width:1000px;
        margin:0 auto;
    }
    /*模板头部，所有专题页面公用*/
    .index_nav{width:575px; height: 70px; margin: 0 auto; padding-left: 5px; background: #fff;}
    .index_nav li{width: 115px; height: 70px; float: left;}
    .index_nav li a{display: block; float: left; width: 70px;height: 70px; background:url(../images/index_nav.gif) 0 0 no-repeat; text-align: center; color: #e02800;}
    .index_nav li a i{display: block; padding-top: 12px; height: 22px; line-height: 22px;}
    .index_nav li a strong{font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 24px; display: block; height: 30px; line-height: 20px;}
    .index_nav li a:hover{background-position: 0 -70px; color: #fff; text-decoration: none;}
    .h15{height: 15px; overflow: hidden;}
    .mainpage{width: 1000px; height:1000px;}
    h2{font-size: 24px; text-align: center; color: #333; font-weight: bold;}
    .mainpage p{width: 650px; margin: 0 auto; color: #fff; font-size: 16px; padding: 50px 0 50px;}
    .mainpage1{background: #fe6400;}
    .mainpage2{background: #be0000;}
    .mainpage3{background: #ccc;}
    .mainpage4{background: #0093dd;}
    .mainpage5{background: #a8cf33;}
    *html{background-image:url(about:blank);background-attachment:fixed;}/*低版本浏览器防止抖动的，必须有*/
    #tbox{width:30px; height:200px; float:right; position:fixed; display: none;
    _position:absolute;
    _bottom:auto;
    _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
    _margin-bottom:50px;
    }/*这个只能改宽高其他的不要修改，需要滚动的内容都要放在这个div里面*/
    .taoba{display:block; background:#c2c2c2; width:30px; height:30px; margin-bottom:4px;text-align: center; color: #fff; line-height: 30px; overflow: hidden;cursor:pointer}
    .taoba:hover{background:#ff4200; text-decoration: none; color: #fff;}
    #gotop{display:block; width:30px; height:30px; text-indent:-9999px; overflow: hidden; color: #fff; background:url(../images/top_icon.gif) no-repeat;  position:absolute; display:none; cursor:pointer} /*这个样式随便改，必须有position:absolute; */
    #gotop:hover{background-position: 0 -30px;}

4.加一个