我想让浏览器通过使用JavaScript将页面滚动到给定的锚点。
我已经在HTML代码中指定了一个名称或id属性:
<a name="anchorName">..</a>
or
<h1 id="anchorName2">..</h1>
我希望获得与您通过导航到http://server.com/path#anchorName所获得的相同效果。应该滚动页面，使锚点靠近页面可见部分的顶部。
当前回答
CSS-Tricks的解决方案不再适用于jQuery 2.2.0。它将抛出一个选择器错误:
JavaScript运行时错误:语法错误，无法识别表达式:a[href*=#]:not([href=#])
我通过改变选择器来修复它。完整的片段如下:
$(function() {
$("a[href*='#']:not([href='#'])").click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
其他回答
简单的方式:
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();
function scrollTo(hash) {
location.hash = "#" + hash;
}
根本不需要jQuery !
很好的解决方案由jAndy，但平滑滚动似乎有问题在Firefox中工作。
在Firefox中也可以这样编写。
(function($) {
$(document).ready(function() {
$('html, body').animate({
'scrollTop': $('#anchorName2').offset().top
}, 2000);
});
})(jQuery);
平稳滚动到适当的位置
得到正确的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'});
要让浏览器滚动页面到给定的锚点，最简单的方法是在style.css文件中添加*{scroll-behavior: smooth;}，在HTML导航中使用# nameofsection。
* {scroll-behavior:光滑;} <a href="# Scroll -to">点击滚动<a/> < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 < p > < / p >其他部分 <节id = "滚动到" > <p>它将向下滚动到这个部分</p> < / >节
