<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href=\公众#div1\"大众>to div1</a>
<a href=\"大众#div2\"大众>to div2</a>
<a href=\"大众#div3\"大众>to div3</a>
</h2>
<div id=\"大众div1\"大众>div1</div>
<div id=\"大众div2\"大众>div2</div>
<div id=\公众div3\"大众>div3</div>
</body>
</html>
这种方法的缺陷是点击锚点之后，浏览器的URL会发生变革，如果刷新可能会涌现问题。
第二种方法是在js事宜中通过window.location.hash=\"大众divId\"大众跳转，但地址也会发生变革，觉得跟第一种方法没差异，乃至更麻烦。第三种方法是用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，详细添加如下代码：<script type=\公众text/javascript\"大众 src=\公众http://code.jquery.com/jquery-1.8.0.min.js\"大众></script>
<script type=\"大众text/javascript\"大众>
$(document).ready(function() {
$(\"大众#div1Link\公众).click(function() {
$(\"大众html, body\"大众).animate({
scrollTop: $(\"大众#div1\公众).offset().top }, {duration: 500,easing: \"大众swing\"大众});
return false;
});
$(\"大众#div2Link\"大众).click(function() {
$(\"大众html, body\"大众).animate({
scrollTop: $(\"大众#div2\"大众).offset().top }, {duration: 500,easing: \公众swing\"大众});
return false;
});
$(\"大众#div3Link\"大众).click(function() {
$(\公众html, body\"大众).animate({
scrollTop: $(\"大众#div3\"大众).offset().top }, {duration: 500,easing: \"大众swing\"大众});
return false;
});
});
</script>
把稳：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。
$(\"大众html, body\公众)可以更换为相应的div，如果不起浸染，试着给该div增加overflow：scroll属性。
其余，脚本可以进一步优化，自己来试试
这样做的好处是：URL地址不会变，同时点击锚点时会自动相应scroll事宜，不须要重新绑定。
缺陷是：如果页脸庞杂的话，偏移值可能会发生变革须要算法赞助。
第四种方法是用js的srollIntoView方法，直接用:document.getElementById(\"大众divId\"大众).scrollIntoView();
比如：
document.querySelector(\"大众#roll1\"大众).onclick = function(){
document.querySelector(\"大众#roll1_top\"大众).scrollIntoView(true);
}
这里便是点击id是#roll1的元素可以滚动到id是#roll1_top的地方，这里的#roll1和#roll1_top最好是逐一对应的，
这种方法的好处，是URL不会变，同时能够相应相应的scroll事宜，不须要算法什么的。代码如下：
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset=\"大众utf-8\"大众>
<script type=\"大众text/javascript\"大众>
window.onload = function(){
/
如果滚动页面也是DOM没有办理的一个问题。为理解决这个问题，浏览器实现了一下方法，
以方便开拓职员如何更好的掌握页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以涌如今视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部涌如今视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变革时，一样平常会用这个方法来吸引用户把稳力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示得到焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。
/
document.querySelector(\"大众#roll1\"大众).onclick = function(){
document.querySelector(\公众#roll_top\公众).scrollIntoView(false);
}
document.querySelector(\"大众#roll2\"大众).onclick = function(){
document.querySelector(\"大众#roll_top\"大众).scrollIntoView(true);
}
}
</script>
<style type=\"大众text/css\"大众>
#myDiv{
height:900px;
background-color:gray;
}
#roll_top{
height:900px;
background-color:green;
color:#FFF;
font-size:50px;
position:relative;
}
#bottom{
position:absolute;
display:block;
left;0;bottom:0;
}
</style>
</head>
<body>
<button id=\"大众roll1\"大众>scrollIntoView(false)</button>
<button id=\公众roll2\"大众>scrollIntoView(true)</button>
<div id=\"大众myDiv\公众></div>
<div id=\"大众roll_top\公众>
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id=\"大众bottom\"大众>scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</body>
</html>
个人建议利用第四种方法。
