# 页面定位到指定位置
<!DOCTYPE html>
<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 οnclick="goToTop();">B、顶部</button>
<button οnclick="goToJys();">C、静夜思</button>
<button οnclick="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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177