一: 通过 html 锚点实现滚动定位到页面指定位置(DIV):
如果我们要点击实现跳转的地方是一个 html 锚点, 也就是点击一个 A 标签超链接实现跳转, 可以把 A 标签的 href 属性直接指向跳转指定位置的 div, 代码实现思路如下:
- <a class="banner" href="/schoolFair/registration#nav">
- <a href="#abc">点击跳转</a>
- <div id="abc">将要跳转到这里</div>
二: 通过点击 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.
综: window.location.href 表示重定向, 后面跟着的是完整的 url 地址, 与其相似的还有 window.location.hash,
下面来比较 window.location.href 和 window.locaiton.hash 的区别.
(1)window.location.href
得到和使用的是完整的 url, 比如 window.location.href="www.baidu.com" 表示的是重新定向, 页面跳转
到新的页面. 也可以通过 window.location.href 得到 a 标签的完整的 href, 比如 < a href="#book">如果使用 href, 那
么可以得到完整的链接(url)
(2)window.location.hash
得到的是锚链接. 相比如 href, 通过 window.location.hash 并不会跳转到新的链接, 只会在当前链接里面
改变锚链. 并且如果有 < a href="#book">通过 window.location.hash 得不到完整的链接(URL), 仅仅得到 #book.
来源: http://www.bubuko.com/infodetail-2559225.html