Как использовать jquery-scrollTo для многих div

Question

Как я могу использовать 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> 

Тогда на моей диве у меня есть:

<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 приборов типа СПИРАЛЬНОЙ Для использования этого:

<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