我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面，使锚点靠近页面可见部分的顶部。
当前回答
$(document).ready ->
$("a[href^='#']").click ->
$(document.body).animate
scrollTop: $($(this).attr("href")).offset().top, 1000
其他回答
简单的方式:
var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();
Vue.js 2解决方案…添加一个简单的data属性来强制更新:
const app = new Vue({
...
, updated: function() {
this.$nextTick(function() {
var uri = window.location.href
var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
this.updater = "" // only on page-load !
location.href = "#"+String(anchor)
}
})
}
});
app.updater = "page_load"
/* Smooth scrolling in CSS - it works in HTML5 only */
html, body {
scroll-behavior: smooth;
}
平稳滚动到适当的位置
得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})
const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo({top: y, behavior: 'smooth'});
大多数答案都不必要地复杂。
如果你只想跳转到目标元素，你不需要JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
如果你想动画地滚动到目标，请参考5hahiL的答案。
你可以使用jQuery的.animate()， .offset()和scrollTop。就像
$(document.body).animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
示例链接:http://jsbin.com/unasi3/edit
如果你不想动画，使用.scrollTop():
$(document.body).scrollTop($('#anchorName2').offset().top);
或者JavaScript的原生位置。散列:
location.hash = '#' + anchorid;
