我正在尝试制作一个无处不在的平滑动画。 当我单击a-tag时,它应该向下/向上滚动到该div。 我确实滚动了,但是并不总是正确的。 例如,如果我单击“关于我们”并且它已正确滚动到该部分,那么如果我再次单击它,它将转到顶部。
我试图弄清楚为什么会这样。
功能如下:
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function (event)
{
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
)
{
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length)
{
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function ()
{
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus"))
{ // Checking if the target was focused
return false;
} else
{
$target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
}
});
}
}
});
scrollTop值有时变为0,但我不明白为什么。 我在此处检查了StackOverflow上的其他类似主题,但不能解决此问题。
非常感谢每个答案!