我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面，使锚点靠近页面可见部分的顶部。
当前回答
大多数答案都不必要地复杂。
如果你只想跳转到目标元素，你不需要JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
如果你想动画地滚动到目标，请参考5hahiL的答案。
其他回答
这是一个没有jQuery的纯JavaScript解决方案。它在Chrome和ie浏览器上进行了测试，但没有在iOS上进行测试。
function ScrollTo(name) {
ScrollToResolver(document.getElementById(name));
}
function ScrollToResolver(elem) {
var jump = parseInt(elem.getBoundingClientRect().top * .2);
document.body.scrollTop += jump;
document.documentElement.scrollTop += jump;
if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
elem.lastjump = Math.abs(jump);
setTimeout(function() { ScrollToResolver(elem);}, "100");
} else {
elem.lastjump = null;
}
}
演示:https://jsfiddle.net/jd7q25hg/12/
jQuery(“[href ^ = ' # ']”).click(函数(){ jQuery (html、身体).animate ({ jQuery(jQuery(this).attr('href')).offset().top }, 1000); 返回错误; })；
大多数答案都不必要地复杂。
如果你只想跳转到目标元素，你不需要JavaScript:
# the link:
<a href="#target">Click here to jump.</a>
# target element:
<div id="target">Any kind of element.</div>
如果你想动画地滚动到目标，请参考5hahiL的答案。
简单的方式:
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();
很好的解决方案由jAndy，但平滑滚动似乎有问题在Firefox中工作。
在Firefox中也可以这样编写。
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);
