控制div跳转到指定位置的若干方法&控制页面定位到指定位置

方法一：用链接a锚点方法

<div id="container">

    <a href="#div1">div1</a>

    <a href="#div2">div2</a>

    <a href="#div3">div3</a>

</div>

  <div id="div1">div1</div>

  <div id="div2">div2</div>

  <div id="div3">div3</div>

css样式：

div {

     height: 800px;

     width: 400px;

     border: 2px solid black;

   }

#container{

     position: fixed;

     margin:50px 500px;

}

方法二：使用jquery的animate方法

html页面：

<div id="container">

     <p id="p1">div1</p>

     <p id="p2">div2</p>

     <p id="p3">div3</p>

</div>

  <div id="div1">div1</div>

  <div id="div2">div2</div>

  <div id="div3">div3</div>

css样式页面同上，看下js代码如下：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>

$(document).ready(function() {

  $("#p1").click(function() {

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

      scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});

    return false;

  });

  $("#p2").click(function() {

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

      scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});

    return false;

  });

  $("#p3").click(function() {

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

      scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});

    return false;

  });

});

方法三：使用window.scrollTo方法

 function scrollWindow(){

  window.scrollTo(100,500);

}

location.href = "#firstAnchor";      // firstAnchor为锚点名称

window.location.hash = "#firstAnchor"; // firstAnchor为锚点名称

<script type=”text/javascript”> $(function(){ window.location.hash = "#title"; }) </script>


 <script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />

    <div id="abc">跳转到的位置</div>


经测试：hash只会在跳转到此页面的第一次起作用，再次刷新此页面将不起作用，而href始终起作用
window.location对象属性介绍：

Location对象属性

hash 设置或返回从井号 (#) 开始的 URL（锚）。 4 1 9 
host 设置或返回主机名和当前 URL 的端口号。 4 1 9 
hostname 设置或返回当前 URL 的主机名。 4 1 9 
href 设置或返回完整的 URL。 4 1 9 
pathname 设置或返回当前 URL 的路径部分。 4 1 9 
port 设置或返回当前 URL 的端口号。 4 1 9 
protocol 设置或返回当前 URL 的协议。 4 1 9 
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 4 1 9 

Location对象方法

hash 设置或返回从井号 (#) 开始的 URL（锚）。 4 1 9 
host 设置或返回主机名和当前 URL 的端口号。 4 1 9 
hostname 设置或返回当前 URL 的主机名。 4 1 9 
href 设置或返回完整的 URL。 4 1 9 
pathname 设置或返回当前 URL 的路径部分。 4 1 9 
port 设置或返回当前 URL 的端口号。 4 1 9 
protocol 设置或返回当前 URL 的协议。 4 1 9 
search 设置或返回从问号 (?) 开始的 URL（查询部分）。 4 1 9 

History 对象 
History 对象包含用户（在浏览器窗口中）访问过的 URL。 
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。 
History 对象属性 
属性 描述 IE F O 
length 返回浏览器历史列表中的 URL 数量。 4 1 9 
History 对象方法 
方法 描述 IE F O 
back() 加载 history 列表中的前一个 URL。 4 1 9 
forward() 加载 history 列表中的下一个 URL。 4 1 9 
go() 加载 history 列表中的某个具体页面。 4 1 9 

History 对象描述 
History 对象最初设计来表示窗口的浏览历史。但出于隐私方面的原因，History 对象不再允许脚本访问已经访问过的实际 URL。唯一保持使用的功能只有 back()、forward() 和 go() 方法。

方法四：用js的srollIntoView方法

html页面：

<ul>

    <li><a href="javascript:;" data-tab="eat">吃饭</a></li>

    <li><a href="javascript:;" data-tab="sleep">睡觉</a></li>

    <li><a href="javascript:;" data-tab="walk">逛街</a></li>

 </ul>

<div >

  <div data-tab="eat" style="background:cyan; height:500px;">

    吃饭

  </div>

  <div data-tab="sleep" style="background:lightgreen;height:2000px;">

    睡觉

  </div>

  <div data-tab="walk" style="background:LightSalmon;height:1000px;">

    逛街

  </div>

</div>

js代码如下：

[].slice.call(document.querySelectorAll('a')).forEach(function(el){

      el.addEventListener('click', function(){

        var target = document.querySelector('div[data-tab=' + this.getAttribute('data-tab')+ ']' )

        target.scrollIntoView(true);

      })

 })

注意一个问题，object.scrollIntoView(bool),前面是对象，通常原生的获取对象都是下面的写法：

document.getElementById('#xxx' ).scrollIntoView(true);

那么如果用jquery来调用该方法的话，需要写成下面这样的：

$('#xxx')[0].scrollIntoView(true);

方法五：

5.如果需要缓慢的移动滚动可添加一个定时器。看下我们这个需求。先贴下代码：

js部分：

点击事件部分：