一：通过html锚点实现滚动定位到页面指定位置（DIV）：
如果我们要点击实现跳转的地方是一个html锚点，也就是点击一个A标签超链接实现跳转，可以把A标签的href属性直接指向跳转指定位置的div，代码实现思路如下：

<a href="#abc">点击跳转</a>

<div id="abc">将要跳转到这里</div>

点击上面A链接将会滚动跳转到同一页面中id="abc"的那个div处，需要注意的是跳转指定位置div的id是唯一的，A标签直接指向此id，id前面别忘了加上#号。
二：通过点击button按钮使用js实现滚定跳转到页面指定位置（DIV）：
如果我们要点击实现跳转的地方是一个button按钮的话，由于button不能添加href，所以我们只好使用js跳转代码来实现，具体代码示例如下：

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

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

上面这段代码，点击提交按钮，将会滚定跳转定位到同一页面id="abc"的div处。这段js点击跳转页面代码实现的原理是：页面各元素赋予唯一ID，点击提交按钮触发js点击事件，js通过ID滚动跳转定位到该元素，window.location.hash = "#abc"指的就是定位到当前页面id="abc"的div。

三：用animate属性，当点击锚点后，页面滚动到相应的DIV。接着上面的代码，具体添加如下代码：

html页面：

css样式：

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

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

转载地址：http://www.haodoxi.com/wangyesheji/169.html

some name of apis will be different (lower case and upper case)
some value will be missing
use padding less, the css will be rendered differently

using request(url,data) will be blocked by cors policy
need to use fetch(url,data) to connect api