锚点 scroll 位置 请达人作答

本帖最后由 yuchenln 于 2009-08-19 15:25:29 编辑

解决方案 »

  1.   

    给你个用jquery 写的例子 <!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" />
    <title>无标题文档</title>
    </head>
    <body>
    <script type="text/javascript" src="http://www.songlecn.com/wp-content/files/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $('a[href*=#]').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;
            $('html,body')
            .animate({scrollTop: targetOffset}, 1000);
           return false;
          }
        }
      });
    });
    </script>
    <h2>16行jQuery代码实现站内锚点scoll效果</h2>
    <div style="color:red">*请刷新页面查看效果</div>
    <div style="height:200px"><a href="#s4" id="s1">点我去地下室</a></div>
    <div style="height:400px"><a href="#s3" id="s2">点我下楼</a></div>
    <div style="height:200px"><a href="#s2" id="s3">点我上楼</a></div>
    <div style="height:200px"><a href="#s1" id="s4">点我上屋顶</a></div>
    </body>
    </html>
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
        function power()
        {
        alert(document.documentElement.scrollTop);
            document.documentElement.scrollTop = 1651;
        }
        function cc()
        {
            document.documentElement.scrollTop = 1300;
        }
        </script>
    </head>
    <body onload="cc();">
        <form id="form1" runat="server">
        <div style=" height:2200px">
        aaa
        </div>
        <a href="javascript:power();" >测试锚点</a>
        <input type="button" onclick="power();" value="bbbbbb" />
        </form>
    </body>
    </html>
      

  3.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>无标题页</title>
        <script language="javascript" type="text/javascript">
        function power()
        { 
            document.documentElement.scrollTop = 1000;
        }
        function cc()
        {
            document.documentElement.scrollTop = 1300;
        }
        </script>
    </head>
    <body onload="cc();">
        <form id="form1" runat="server">
        <div style=" height:2200px">
        aaa
        </div>
        <a href="javascript:power();" >测试锚点</a>
        <input type="button" onclick="power();" value="bbbbbb" />
        </form>
    </body>
    </html>
      

  4.   

    啊是啊.href如果有"#"的时候,会先去到锚点,然后不滚动了.顶楼上的..
    完全正确啊.