href 做导航

浏览数：32 / 时间：2015年06月09日

  <div>

      <div>
        <%for (int i = 0; i < 200; i++)
          {
        %><%=i.ToString() %>
        <br />
        <%
          } %>
        <div id="toTopB_blk">11</div>
        <%for (int i = 400; i < 600; i++)
          {
        %><%=i.ToString()%>
        <br />
        <%
          } %>
      </div>
      <a href="#toTopB_blk" class="toTop toTop02">111</a>
    </div>

点击链接跳转到 <div id="toTopB_blk">11</div> 这里。

还可以借助 css js 做一些特效。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm13.aspx.cs" Inherits="bootstrapLearn.WebForm13" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <script src="js/jquery.min.js"></script>

  <script>
    ishid = true;
    /*导航滚动效果*/
    function navClarity() {
      var ground = $("#nav-background");
      var nav = $(".nav");
      var logo = $(".brand");

      var winWid = document.documentElement.clientWidth;
      if ($(window).scrollTop() > 30 || winWid < 960) {
        ground.removeClass("nav-clarity");
        ground.addClass("nav-solid");


      } else {
        ground.removeClass("nav-solid");
        ground.addClass("nav-clarity");

      }
    }



    /*下载移入效果*/
    function downloadImg(o) {
      $(o).hover(
        function () {
          //$(this).find("img").stop().fadeIn();
        },
        function () {
          //$(this).find("img").stop().hide();
        }
      )

    }

    /*返回顶部*/
    function toTop() {
      var to01 = $(".toTop01");
      var to02 = $(".toTop02");
      var to = $(".toTop");
      var toB = $(".footer");

      to.hover(
        function () {
          //$(this).find("div").fadeIn();
        },
        function () {
          //$(this).find("div").hide();
        }
      )

      $(window).scroll(function () {
        var st = $(window).scrollTop();
        if (st > document.documentElement.clientHeight) {

          to01.show();

          var toT = parseInt(to01.offset().top);
          var toB1 = parseInt(toB.offset().top);
          var toSH = document.body.scrollHeight - 380;
          console.log(toT > toSH, toT, toSH, toB1);
          if (toT > toSH) {
            //to01.hide();
            to02.show().css({ "top": toB1 - 80 + "px" });
          } else {
            //to01.show();
            // 渐出

            div4click();
            return;
            to02.hide();

          }
        } else {

          div3click();
          return;
          to01.hide();

        }
        if (to02.is(":hidden")) { to01.show(); } else { to01.hide(); }
        if (st < document.documentElement.clientHeight) { to01.hide(); }
      });




    }

    /*锚点*/
    function goto(s) {

      $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $(‘html‘) : $(‘body‘)) : $(‘html,body‘);
      $(s).click(function () {
        if (location.pathname.replace(/^\//, ‘‘) == this.pathname.replace(/^\//, ‘‘) && location.hostname == this.hostname) {
          var $target = $(this.hash);
          $target = $target.length && $target || $(‘[name=‘ + this.hash.slice(1) + ‘]‘);
          if ($target.length) {
            var targetOffset = $target.offset().top - 100;
            $(‘html,body‘).animate({
              scrollTop: targetOffset
            },
            1000);
            return false;
          }
        }
      });

    }

    //搜索获得焦点
    function searchC() {
      $(".search-help-text").focus(function () {
        $(this).animate({ "width": "460px" });
      }).blur(function () {
        $(this).animate({ "width": "260px" });
      });
    }


    $(document).ready(function () {
      navClarity();/*导航滚动效果*/
      downloadImg(".download-img a");/*下载移入效果*/
      downloadImg(".Download_hp p");

      toTop();/*返回顶部*/

      searchC();/*搜索获得焦点*/

      goto(".toTop");
      goto(".explainGo");
    })

    $(window).resize(function () {
      navClarity();/*导航滚动效果*/
    });

    $(window).scroll(function () {
      navClarity();/*导航滚动效果*/
    });


  </script>

  <script>
    var rotINT, rotINT2, x, n = 0, y, m = 0, a = 360, b = 70;
    function div2click() {
      x = document.getElementById("div2");
      clearInterval(rotINT);
      rotINT = setInterval("startRotate()", 1)
    }

    function div1click() {
      y = document.getElementById("div1");
      clearInterval(rotINT2);
      rotINT2 = setInterval("startRotate2()", 10)
    }

    function startRotate() {
      n = n + 2
      x.style.transform = "rotate(" + n + "deg)"
      x.style.webkitTransform = "rotate(" + n + "deg)"
      x.style.OTransform = "rotate(" + n + "deg)"
      x.style.MozTransform = "rotate(" + n + "deg)"
      if (n == 360) {
        clearInterval(rotINT)
        if (n == 360) { n = 0 }
      }
    }
    function startRotate2() {
      m = m + 1
      y.style.transform = "translateX(" + m + "px)";
      y.style.webkitTransform = "translateX(" + m + "px)";
      y.style.OTransform = "translateX(" + m + "px)";
      y.style.MozTransform = "translateX(" + m + "px)";
      if (m == 70) {
        clearInterval(rotINT2)
        if (m == 70) { m = 0 }
      }
    }



    function startRotateOut() {
      a = a - 2
      x.style.transform = "rotate(" + a + "deg)"
      x.style.webkitTransform = "rotate(" + a + "deg)"
      x.style.OTransform = "rotate(" + a + "deg)"
      x.style.MozTransform = "rotate(" + a + "deg)"
      if (a == 0) {
        clearInterval(rotINT)
        if (a == 0) { a = 360 }
      }
    }

    function startRotate2Out() {
      b = b - 1
      y.style.transform = "translateX(" + b + "px)";
      y.style.webkitTransform = "translateX(" + b + "px)";
      y.style.OTransform = "translateX(" + b + "px)";
      y.style.MozTransform = "translateX(" + b + "px)";
      if (b == 0) {
        clearInterval(rotINT2)
        if (b == 0) { b = 70 }
      }
    }
    //hid
    function div3click() {
      if (!ishid) {
        div1click();
        div2click();
      }
      ishid = true;
    }
    // show
    function div4click() {
      if (ishid) {
        y = document.getElementById("div1");
        clearInterval(rotINT2);
        rotINT2 = setInterval("startRotate2Out()", 10)

        x = document.getElementById("div2");
        clearInterval(rotINT);
        rotINT = setInterval("startRotateOut()", 1)
      }
      ishid = false;


    }
  </script>
  <style>
    #toTopB_blk {
      display: block;
      height: 0px;
      width: 90%;
      margin: 0 auto;
      padding: 0;
      overflow: hidden;
    }

    .toTop {
      display: none;
      height: 60px;
      width: 60px;
      /*background-image: url(../images/toTop00.png);
      background-repeat: no-repeat;*/
    }

      .toTop div {
        /*display: none;*/
        height: 60px;
        width: 60px;
        /*background-image: url(../images/toTop01.png);
        background-repeat: no-repeat;*/
      }

    .toTop01 {
      position: fixed;
      _position: absolute;
      _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-35);
      z-index: 200;
      right: 20px;
      bottom: 35px;
    }

    .toTop02 {
      display: none;
      position: absolute;
      z-index: 200;
      right: 20px;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <%--48--%>
    <div id="dd" style="position: fixed; left: 100px">111<input type="button" onclick="div4click()" /></div>

    <div   id="toTopB_blk"></div>
    <a href="#toTopB_blk"  class="toTop toTop01">
      <div id="div1" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">
        <div id="div2"   style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>
      </div>
    </a>
    <a href="#toTopB_blk"   class="toTop toTop02">
      <div id="div3" onclick="" style="position: fixed; right: 10px; height: 50px; width: 50px">
        <div id="div4" style="background-image: url(11/top_button2.png); height: 50px; width: 50px"></div>
      </div>
    </a>
    <div>
      <%for (int i = 0; i < 200; i++)
        {
      %><%=i.ToString() %>
      <br />
      <%
        } %>
    </div>

    <div class="footer">
      <%--<div class="container">
        <div class="row-fluid show-grid">

          <div class="span9">
            <div class="row-fluid">
              <div class="span6">
                <div class="footer-guild">
                  <h6>技术支持服务</h6>
                  <table>
                    <tr>
                      <td>技术支持电话</td>
                      <td>：400-877-3227</td>
                    </tr>
                    <tr>
                      <td>技术支持QQ</td>
                      <td>：4008773227</td>
                    </tr>
                    <tr>
                      <td style="letter-spacing: 0.25em">QQ交流群</td>
                      <td>：425028726</td>
                    </tr>
                    <tr>
                      <td style="letter-spacing: 0.22em">论坛讨论区</td>
                      <td>：
                                    <a href="http://bbs.ikuai8.com/forum.php" target="_blank">bbs.ikuai8.com</a>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div class="span6">
                <div class="footer-service">
                  <h6>产品销售</h6>
                  <table>
                    <tr>
                      <td class="tt">联系电话</td>
                      <td>：010-57484276&nbsp;&nbsp;010-58483454</td>
                    </tr>

                    <tr>
                      <td style="letter-spacing: 0.1em">联 系 人</td>
                      <td>：爱快市场</td>
                    </tr>

                    <tr>
                      <td>邮　　箱</td>
                      <td>：<a href="mailto:[email protected]">[email protected]</a></td>
                    </tr>

                    <tr>
                      <td colspan="2">
                        <a href="#" target="_blank">了解我们的商业产品</a>
                      </td>
                    </tr>
                  </table>

                </div>
              </div>
              <div class="footer-guild">
                <div class="span12">
                  <div class="footer-copyright tc">
                    <span onclick="$(‘#login‘).show()">(C)版权所有</span>　iKuaiCopyright(C)2012 All Rights Reserved 京ICP备13001110号
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="span3">
            <div class="footer-logo fc">
              <a class="" href="#">
                <img src="img/logo-small.png" /></a>
              <img src="img/qrCode.png" />
            </div>
          </div>

        </div>
      </div>--%>
    </div>
  </form>
</body>
</html>