href 做导航 特效
<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 010-58483454</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="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>
