有没有办法使用 jQuery 向下滚动到锚链接？
喜欢：
$(document).ready(function(){
$("#gotomyanchor").click(function(){
$.scrollSmoothTo($("#myanchor"));
});
});
?
jquery平滑滚动到锚点？
IT技术
javascript
jquery
2021-02-07 05:50:23
6个回答
这是我如何做到的：
var hashTagActive = "";
$(".scroll").on("click touchstart" , function (event) {
if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
event.preventDefault();
//calculate destination place
var dest = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
dest = $(document).height() - $(window).height();
} else {
dest = $(this.hash).offset().top;
}
//go to destination
$('html,body').animate({
scrollTop: dest
}, 2000, 'swing');
hashTagActive = this.hash;
}
});
然后你只需要像这样创建你的锚点：
<a class="scroll" href="#destination1">Destination 1</a>
你可以在我的网站上看到它。
这里也有一个演示：http : //jsfiddle.net/YtJcL/
我将使用来自 CSS-Tricks.com 的简单代码片段：
$(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;
}
}
});
});
来源：http : //css-tricks.com/snippets/jquery/smooth-scrolling/
迄今为止我见过的最佳解决方案： jQuery: Smooth Scrolling Internal Anchor Links
HTML：
<a href="#comments" class="scroll">Scroll to comments</a>
脚本：
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
jQuery.scrollTo会做你想做的一切，甚至更多！
您可以将各种不同的东西传递给它：
- 一个原始数字
- 一个字符串（'44'、'100px'、'+=30px'等）
- 一个 DOM 元素（逻辑上，可滚动元素的子元素）
- 一个选择器，它将相对于可滚动元素
- 要滚动到末尾的字符串 'max'。
- 一个字符串，指定滚动到容器该部分的百分比（fe: 50% 转到 * 到中间）。
- 散列 { top:x, left:y }, x 和 y 可以是任何类型的数字/字符串，如上所示。
这是我用来快速将 jQuery scrollTo 绑定到所有锚链接的代码：
// Smooth scroll
$('a[href*=#]').click(function () {
var hash = $(this).attr('href');
hash = hash.slice(hash.indexOf('#') + 1);
$.scrollTo(hash == 'top' ? 0 : 'a[name='+hash+']', 500);
window.location.hash = '#' + hash;
return false;
});