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

如何使用jquery-scrollTo为许多div

1 个答案: