<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() >  || winWid < ) {

        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 - ;

          console.log(toT > toSH, toT, toSH, toB1);

          if (toT > toSH) {

            //to01.hide();

            to02.show().css({ "top": toB1 -  + "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() + ']');

          if ($target.length) {

            var targetOffset = $target.offset().top - ;

            $('html,body').animate({

              scrollTop: targetOffset

            },

            );

            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 = , y, m = , a = , b = ;

    function div2click() {

      x = document.getElementById("div2");

      clearInterval(rotINT);

      rotINT = setInterval("startRotate()", )

    }

    function div1click() {

      y = document.getElementById("div1");

      clearInterval(rotINT2);

      rotINT2 = setInterval("startRotate2()", )

    }

    function startRotate() {

      n = n +

      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 == ) {

        clearInterval(rotINT)

        if (n == ) { n =  }

      }

    }

    function startRotate2() {

      m = m +

      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 == ) {

        clearInterval(rotINT2)

        if (m == ) { m =  }

      }

    }

    function startRotateOut() {

      a = a -

      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 == ) {

        clearInterval(rotINT)

        if (a == ) { a =  }

      }

    }

    function startRotate2Out() {

      b = b -

      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 == ) {

        clearInterval(rotINT2)

        if (b == ) { b =  }

      }

    }

    //hid

    function div3click() {

      if (!ishid) {

        div1click();

        div2click();

      }

      ishid = true;

    }

    // show

    function div4click() {

      if (ishid) {

        y = document.getElementById("div1");

        clearInterval(rotINT2);

        rotINT2 = setInterval("startRotate2Out()", )

        x = document.getElementById("div2");

        clearInterval(rotINT);

        rotINT = setInterval("startRotateOut()", )

      }

      ishid = false;

    }

  </script>

  <style>

    #toTopB_blk {

      display: block;

      height: 0px;

      width: %;

      margin:  auto;

      padding: ;

      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-);

      z-index: ;

      right: 20px;

      bottom: 35px;

    }

    .toTop02 {

      display: none;

      position: absolute;

      z-index: ;

      right: 20px;

    }

  </style>

</head>

<body>

  <form id="form1" runat="server">

    <%----%>

    <div id="dd" style="position: fixed; left: 100px"><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 = ; i < ; 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>：--</td>

                    </tr>

                    <tr>

                      <td>技术支持QQ</td>

                      <td>：</td>

                    </tr>

                    <tr>

                      <td style="letter-spacing: 0.25em">QQ交流群</td>

                      <td>：</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>：-&nbsp;&nbsp;-</td>

                    </tr>

                    <tr>

                      <td style="letter-spacing: 0.1em">联 系 人</td>

                      <td>：爱快市场</td>

                    </tr>

                    <tr>

                      <td>邮　　箱</td>

                      <td>：<a href="mailto:sales@ikuai8.com">sales@ikuai8.com</a></td>

                    </tr>

                    <tr>

                      <td colspan="">

                        <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) 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>

href 做导航 特效的更多相关文章

  1. JQuery和原生JavaScript实现网页定位导航特效

    慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...

  2. JQuery制作简单的网页导航特效

    使用JQuery中hover()方法,使其根据鼠标的移动简单的改变背景颜色; hover();用于模拟鼠标指针悬停事件,当鼠标指针移动到元素上时,会触发指定的第一个函数,当鼠标指针移除这个元素时,会触 ...

  3. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  4. react-navigation 做导航栏，发现 Android 上的标题不居中

    在做 React Native 应用的时候,我们常常使用 react-navigation 做导航栏,发现 Android 上的标题不居中,IOS 上没问题. 1 如果只有标题,那就在 headerT ...

  5. [Jquery]网页定位导航特效

    描述:左右联动的导航,非常适合展示页面内容多,区块划分又很明显的,点击右边固定导航项时,左边的内容跟着切换.滑动滚动条的时候,右边的导航也随着左边的展示而进行高亮切换. 思路:比较滚动距离和楼层距离( ...

  6. php -- PHP实现点击a标签的href做链接时，直接保存文件（任何类型），而不是通过浏览器直接打开下载的文件

    之前做项目遇到这样一个问题,就是在php环境下,用a标签的href链接到一个资源,比如是mp3或者lrc文件时,点击之后不是出现保存文件的提示,而是调用本地程序打开文件或者直接在浏览器上解析.网上说可 ...

  7. 在react项目当中做导航守卫

    距离上一篇文章,似乎已经过去好久了. 确实是最近相对忙了一点,本身是用vue重构之前一个传统的项目,就自己一个人写.而且,在稍微闲暇之余,想着同时用react也重构一遍,也算是对react的学习吧!毕 ...

  8. 利用JS做网页特效——大图轮播

    大图轮播完整流程代码操作: <style>            * {                margin: 0px;                padding: 0px;  ...

  9. 基于jQuery和CSS3超酷Material Design风格滑动菜单导航特效

    分享一款效果非常炫酷的谷歌 Material Design 风格jQuery和CSS3滑动选项卡特效.该选项卡特效集合了扁平风格设计和按钮点击波特效.是一款设计的非常不错的Material Desig ...

随机推荐

  1. 【剑指offer】面试题39：深度二叉树

    def TreeDepth1(root): if None == root: return 0 if None == root.left and None == root.right: return ...

  2. ORACLE 实验一

    实验一:数据定义 实验学时:4学时 实验类型:综合型 实验要求:必修 一.实验目的 1.熟悉Oracle的client配置: 2.掌握SQL Plus的使用: 3.掌握SQL模式定义语句,定义相关的表 ...

  3. Codeforces Round #252 (Div. 2) 441B. Valera and Fruits

    英语不好就是坑啊.这道题把我坑残了啊.5次WA一次被HACK.第二题得分就比第一题高10分啊. 以后一定要加强英语的学习,要不然就跪了. 题意:有一个果园里有非常多树,上面有非常多果实,为了不然成熟的 ...

  4. Netty In Action中文版 - 第一章：Netty介绍

    本章介绍 Netty介绍 为什么要使用non-blocking IO(NIO) 堵塞IO(blocking IO)和非堵塞IO(non-blocking IO)对照 Java NIO的问题和在Nett ...

  5. Redis数据结构

    Redis数据结构 Redis数据结构详解(一)   前言 Redis和Memcached最大的区别,Redis 除啦支持数据持久化之外,还支持更多的数据类型而不仅仅是简单key-value结构的数据 ...

  6. NetBeans工具学习之道：NetBeans IDE Java 高速新手教程

    欢迎使用 NetBeans IDE! 本教程通过指导您创建一个简单的 "Hello World" Java 控制台应用程序,简要介绍 NetBeans IDE 工作流.学习完本教程 ...

  7. HDU2149-Public Sale

    Public Sale Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...

  8. 【Nginx】如何应对HTTP组态

    相同的配置项可以在相同的时间内发生的多个块.例如HTTP片.server片.location片.阻断取之于在配置项值. 处理HTTP配置项分下面4个步骤: 创建数据结构用于存储配置项相应的參数 设定配 ...

  9. MapXtreme DJ最短路径算法 全路径搜索算法

    包括最短路径,全路径搜索算法演示程序请在http://pan.baidu.com/s/1jG9gKMM#dir/path=%2F%E4%BA%A7%E5%93%81%2FDemos 找 ShortWa ...

  10. PHP上传文件（学习）

    <?php if(isset($_FILES['upfile'])) { if (is_uploaded_file($_FILES['upfile']['tmp_name'])){ $upfil ...