如何在我的网页中使用Bootstrap实现平滑滚动？

11 浏览
0 Comments

如何在我的网页中使用Bootstrap实现平滑滚动？

我有一个很长的网页，所以我想添加目录。现在我想要在网页上的普通超链接中实现平滑滚动，而不只是跳转到新的位置。我看过很多关于如何从导航栏导航到特定位置的教程，但我想从网页上的普通超链接中实现。在我的html中，目前有：\n

目录

 
    
lorem ipsum

    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
    
lorem ipsum

    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
    
lorem ipsum

    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum
    
lorem ipsum

    lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsum

\n有没有原生的bootstrap方式来实现平滑滚动？或者有没有我可以自行调整的js脚本？

0

2 答案

0 Comments

有另一个问题可能会帮助你得到你想要的东西，但window.scrollTo()似乎是你正在寻找的！这是问题的链接。

谢谢，但是我怎么知道偏移量？：）有没有一种方法只需放置div的id而不是偏移量呢？

问题的原因：用户想要在自己的网页中实现平滑滚动效果，但不知道如何获取要滚动到的偏移量。

解决方法：使用window.scrollTo()方法来实现平滑滚动效果，并且可以通过指定div的id来替代偏移量。

解决代码如下：

Click here to scroll to myDiv

以上代码可以在网页中创建一个链接，当点击该链接时，页面会平滑滚动到指定id的div。

希望以上内容对您有所帮助！

0
0 Comments

可以使用以下代码来应用到多个#myId链接：

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.getAttribute('href'));
    if( target.length ) {
        event.preventDefault();
        $('html, body').stop().animate({
            scrollTop: target.offset().top
        }, 2000);
    }
});

0