假设我在一个页面中有一个链接，
<a href="https://example.com/#sample"><p>Click Me</a>
单击单击会转到 href 属性中的链接。但是由于神的工作方式，它会立即捕捉到该页面中的 id。
我想要发生的是页面不应该立即转到id，而是从页面顶部开始，然后平滑滚动到id。
顺便说一句，粘性菜单挡住了路，当它捕捉到 id 时，它与菜单重叠（我希望它滚动的主要原因之一）。
jQuery 不是我的强项。
感谢任何可以提供帮助的人。
编辑 我认为我措辞不当。 带有 a 标签的链接与其目标位于不同的页面上。 例如：
首页有链接
<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>
有一个名为 anotherPage 的页面，我想滚动处理它。
很抱歉没有把它说得不够详细。
感谢所有回复的人。
【问题讨论】：
您可以使用 jQuery 的动画功能。
查看 w3 学校的示例：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
【讨论】：
使用 jQuery 很简单，只需几行代码。
当使用$('a[href*=\\#]') 时，它仅/自动应用于所有带有哈希 (#) 的锚点 (<a>)。
$(document).ready(function() {
$('a[href*=\\#]').on('click', function(e){
e.preventDefault();
$('html, body').animate({
scrollTop : $(this.hash).offset().top
}, 500);
});
});
如果您想平滑滚动到新页面上的元素，请在该页面上包含以下代码：
$(document).ready(function() {
if (window.location.hash) {
var hash = window.location.hash;
$('html, body').animate({
scrollTop : $(hash).offset().top
}, 500);
};
});
它检查 URL 中是否有哈希，如果有，它会平滑滚动到具有相应 id 的元素。
注意 1：您可以通过更改 500 参数来更改速度。是以毫秒为单位的动画时间。
注意2：你也可以在500之后再添加一个参数，就是缓动类型。默认为swing（类似于CSS 的ease-in-out），但您可以将其更改为linear。
【讨论】：
我总是将这个用于外部链接： 这将滚动到具有 id #
的锚点$(document).on("ready", function () {
var urlHash = window.location.href.split("#")[1];
$('html,body').animate({
scrollTop: $('.' + urlHash + ', #' + urlHash +',[name='+urlHash+']').first().offset().top -100
}, 1000);
});
【讨论】：