javascript - 如何对多个div使用jquery-scrollTo

Question

如何在多个 div 上使用 jquery-scrollTo。假设我有以下 div

<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
    <li><a href="#grid" class="scrollto">Grid System</a></li>
    <li><a href="#tooltips" class="scrollto">Tooltips</a></li>
    <li><a href="#tables" class="scrollto">Tables</a></li>
    <li><a href="#carousel" class="scrollto">Carousel</a></li>
    <li><a href="#thumbnails" class="scrollto">Thumbnails</a></li>
    <li><a href="#forms" class="scrollto">Forms</a></li>
</ul>

然后在我的 div 上我有:

<section class="intro-features" id="grid">
</section>
<section class="intro-features" id="tooltips">
</section>
<section class="intro-features" id="tables">
</section>
<section class="intro-features" id="carousel">
</section>

所以基本上，你将把它称为 jQuery scrool 使用这个:

<script>
    $("div#div1").click(function() {
        $('html, body').animate({
            scrollTop: $("div#myDiv").offset().top
        }, 2000);
    });
</script>

有什么想法吗？ https://github.com/flesler/jquery.scrollTo

Answer 1

我希望这会有所帮助。

无需插件，只需 jQuery:

$("a").click(function() {
    $('html, body').animate({
        scrollTop: $(this.getAttribute("href")).offset().top
    }, 500);
});

section {
    height: 500px;
    margin-bottom: 20px;
    background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
    <li><a href="#grid" class="scrollto">Grid System</a></li>
    <li><a href="#tooltips" class="scrollto">Tooltips</a></li>
    <li><a href="#tables" class="scrollto">Tables</a></li>
    <li><a href="#carousel" class="scrollto">Carousel</a></li>
    <li><a href="#thumbnails" class="scrollto">Thumbnails</a></li>
    <li><a href="#forms" class="scrollto">Forms</a></li>
</ul>

<section class="intro-features" id="grid">
</section>
<section class="intro-features" id="tooltips">
</section>
<section class="intro-features" id="tables">
</section>
<section class="intro-features" id="carousel">
</section>

fiddle