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

本文主要是介绍控制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>

经测试：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对象方法

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部分：

  return cPageView.extend({ 
        pageid: 10320608681, 
        hpageid: 10320608681, 
        events: { 
          "click .nav_list li " : "setHightLight" , 
        }, 
 }) 
 

点击事件部分：

  //设置标签选中，并且滚动到相应的位置 
       setHightLight: function (e) { 
         var obj = $(e.currentTarget); 
         var _tag =  this .$el.find( '.nav_list li' ); 
         var $innerText =  this .$el.find( '.fsp_hd' ); 
         var items = $( ".fs_prd_wrap" ).find( '.item' ); 
         this .$el.find( '.nav_list li' ).removeClass( 'current' ); 
         var itemIndex =  "" ; 
         var objCurrent = []; 
         obj.addClass( 'current' ); 
         var scrollMove =  function (scrollTo, time) { 
           var scrollFrom = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 
           var count = 0; 
           var every = 10; 
           scrollTo = parseInt(scrollTo); 
           time /= every; 
    
           var interval = setInterval( function () { 
             count++; 
             document.documentElement.scrollTop = document.body.scrollTop = (scrollTo - scrollFrom) / time * count + scrollFrom; 
             if (count >= time) { 
               clearInterval(interval); 
             } 
           }, every); 
         }; 
         for ( var i = 0; i < items.length; i++) { 
           var self =  this ; 
           items[i].index = i; 
           if (obj.index() == items[i].index) { 
             items.each( function () { 
               var currentItem = $( this ); 
               // items[i].scrollIntoView(false);      
               scrollMove(items[i].offsetTop-75, 500); 
             }); 
              
             // console.log(items[i].index); 
           } 
         } 
       }, 
 
  
 
  
 应用实例： 
 
  
 