htmlページを指定位置に位置決めする4つの実装方式
<html>
<head>
<meta charset="utf-8">
head>
<style>
body {
text-align: center;
}
#go_to {
position: fixed;
right: 10px;
bottom: 10px;
}
style>
<body>
<h3 name="top"> 300 h3>
<p>《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p id="jys"> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。p>
<p id="cao"> 《 》<br/>
： <br/>
， 。<br/>
， 。<br/>
， 。 <br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。p>
<p> 《 》<br/>
： <br/>
， 。<br/>
， 。<br/>
， 。<br/>
， 。p>
<div id="go_to">
<a href="#top">A、 a>
<button onclick="goToTop();">B、 button>
<button onclick="goToJys();">C、 button>
<button onclick="goToCao();">D、 button>
div>
body>
<script type="text/javascript" src="jquery-3.0.0.min.js">script>
<script type="text/javascript">
function goToTop() {
location.href = "#top";
}
function goToJys() {
$("html,body").animate({scrollTop: $("#jys").offset().top}, 500);// 《 》
}
function goToCao() {
/**
* DOM 。 ， ，
* 。 ，HTML5 scrollIntoView()
* 。
* scrollIntoView() HTML ， ，
* 。 true ， ，
* 。 false ，
* （ ， 。）
* ， ：
* //
* document.forms[0].scrollIntoView();
* ， 。 ，
* 。
* IE、Firefox、chrome、Safari Opera。
*
* querySelector
* querySelectorAll Element
* jQuery(element) Element
*
* ：http://www.cnblogs.com/daxian2012/archive/2012/10/18/2729359.html
* ：http://blog.csdn.net/only_love_strangers/article/details/47264889
*/
document.querySelector("#cao").scrollIntoView();
/**
* ：$("#cao")[0]， ：$("#cao")，
* $('#cao') jQuery ， scrollIntoView() DOM
* ， jQuery DOM ， jQuery
* DOM 。
*/
$("#cao")[0].scrollIntoView();
}
script>
html>