单击锚链接时平滑滚动

10 浏览
0 Comments

单击锚链接时平滑滚动

我在我的页面上放了几个超链接。当用户访问我的帮助部分时会阅读到一个常见问题解答页面。

通过使用锚点链接，我可以让页面滚动到锚点处并引导用户到达那里。

有没有一种方法可以让页面滚动更加流畅？

但请注意，他正在使用自定义JavaScript库。也许jQuery内置了类似于这种的一些东西？

admin 更改状态以发布 2023年5月24日
0

2 答案

0 Comments

CSS3中的新热点。这比本页列出的任何方法都要容易得多，而且不需要JavaScript。只需将下面的代码输入您的CSS中，所有针对您自己页面内部位置的链接将具有平滑的滚动动画。

html{scroll-behavior:smooth}

此后，指向

的任何链接都将平稳滑过到这些部分。

Section1

编辑：对于上面的a标签感到困惑的人。基本上，它是一个可点击的链接。然后，您可以在您的网页的某个地方有另一个div标签，例如

content

在这方面，a链接是可点击的，并将前往任何#section，这种情况下，我们称之为部分(div)。

顺便说一下，我花了好几个小时来尝试让它工作。在一些标签中，它是有缺陷的，并且不能正常工作。它在body中也无法使用。最后，当我把它放在CSS文件中的html{}中时，它终于工作了。

0
0 Comments

2018年4月更新： 现在有一种本地方法来做这件事：

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

目前只有最新版的浏览器支持该方法。

对于旧版浏览器的支持，可以使用这个jQuery技术：

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();
    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

这是jsfiddle的链接：http://jsfiddle.net/9SDLw/

如果目标元素没有ID，并且您通过其name来链接它，请使用此方法：

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);
    return false;
});

为了提高性能，应该缓存$('html, body')选择器，以便每次单击锚点时不运行它：

var $root = $('html, body');
$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});

如果想要更新URL，请在animate回调函数中完成：

var $root = $('html, body');
$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');
    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });
    return false;
});

0