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

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

div1 div2 div3

div1

div2

div3

css样式：

div {
height: 800px;
width: 400px;
border: 2px solid black;
}
#container{
position: fixed;
margin:50px 500px;
}

方法二：使用jquery的animate方法
html页面：

div1

div2

div3

div1

div2

div3

css样式页面同上，看下js代码如下： $(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为锚点名称

<input  type="button" name="Submit" value="提交"  οnclick="javascript:onTopClick();" />

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

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

Location对象属性

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

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

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

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

方法四：用js的srollIntoView方法

html页面：

• 吃饭
• 睡觉
• 逛街

吃饭

睡觉

逛街

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