如何使用Bootstrap实现平滑滚动？

我一直在努力挣扎两个小时，几个不同的jQuery插件试图让我的网站平滑滚动工作。如何使用Bootstrap实现平滑滚动？

这里是现在相关的代码：

<div class="row-fluid"> 
<header class="span12 hero-unit"> 
<ul class="thumbnails"> 
    <li class="span3"></li> 
    <li class="span2"> 
    <a href="#Blog" class="thumbnail"> 
    <img src="images/nav_icon-01.png" alt="Blog"/> 
    </a> 
    </li> 
    <li class="span2"> 
    <a href="#Projects" class="thumbnail"> 
    <img src="images/nav_icon-02.png" alt="Projects"/> 
    </a> 
    </li> 
    <li class="span2"> 
    <a href="#Contact" class="thumbnail"> 
    <img src="images/nav_icon-03.png" alt="Contact"/> 
    </a> 
    </li> 
    <li class="span3"></li> 

</ul> 
</header> 
</div>

我已经删除了我所有的JS代码（因为我知道，我没有正确地使用其中任何一个，想刚开始新鲜的），除了这一个，因为这似乎实际上工作，但只有在页面加载时激活，我想知道是否有可能通过点击工作。

<script type="text/javascript"> 
$('html, body').animate({ 
scrollTop: $("#Blog").offset().top 
}, 2000); 
</script>

来源

2013-02-24 katgarcia

我不知道这个插件，但根据是什么在起作用，像（假设最近的JQuery）：

$('a.thumbnail').on('click', function() { 
    var to = $(this).attr('href'); // $(this) is the clicked link. We store its href. 
    $('html, body').animate({ scrollTop: $(to).offset().top }, 2000); 
)};

如果你的jQuery是< 1.7，你可以试试。点击（），无论JQuery的版本，将工作：

$('a.thumbnail').click(function() { 
    var to = $(this).attr('href'); 
    $('html, body').animate({ scrollTop: $(to).offset().top }, 2000); 
});

来源

2013-02-24 18:31:37 mddw

+1，这应该工作。 – 2013-02-24 18:34:30

感谢您的快速回答！我用把它放在身体的尽头，那是正确的方法来实现它吗？它仍然无法工作，对于愚蠢的问题感到抱歉。 – katgarcia 2013-02-24 18:55:16

你最近的JQuery版本是？ .on（）在1.7中引入。如果不是，你可以使用.live来代替。您应该将脚本放在文档中（http://api.jquery.com/ready/）。 – mddw 2013-02-24 18:58:40

什么MDDW提到的作品，但它会造成相当大的闪烁，除非你阻止浏览器的默认操作如下（也，他的结局大括号顺序错误）：

$('a.thumbnail').on('click', function(event) { 
    var to = $(this).attr('href'); 
    $('html, body').animate({ scrollTop: $(to).offset().top }, 500); 
    event.preventDefault(); 
});

来源

2013-04-15 01:00:54 Brideau

如何使用Bootstrap实现平滑滚动？

回答

相关问题