Hinzufügen eines glatten scroller JavaScript auf Wordpress

Question

Ich habe drei divs:

<div id="main"> 
 
    TEXT 
 
</div> 
 

 
<div id="secondary"> 
 
    TEXT 
 
</div> 
 

 
<div id="third"> 
 
    TEXT 
 
</div>

Jetzt muss ich ein einfaches Javascript hinzufügen, die glatt (mit einer glatten CSS3-Animation) bewegen wird, wenn Klick innerhalb ein Anker-Tag.

Beispiel: Wenn ich auf <a href="#main">Go to bottom</a> klicke, scrollt es dann zum Hauptdiv reibungslos. Ich muss das auf meinem Wordpress implementieren.

Ich hoffe, Sie könnten helfen. Danke!

Answer 1

Verwenden Nicescroll js, ich habe auch in meinem Wordpress-Seite verwenden:

folgen Sie diesem Link:

http://areaaperta.com/nicescroll/demo.html

Answer 2

Ist es so etwas für Ihre Suche

a[ id= "main" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(0px); 
 
    transform: translateY(0px); 
 
} 
 

 
a[ id= "secondary" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-500px); 
 
    transform: translateY(-500px); 
 
} 
 
a[ id= "third" ]:target ~ #main article.panel { 
 
    -webkit-transform: translateY(-1000px); 
 
    transform: translateY(-1000px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 

 
<a href="#third">Go to bottom</a> 
 

 
<div id="main" name='main' style='background-color:red;'> 
 
TEXT 1 
 
</div> 
 
    
 
<div id="secondary" name='secondary' style='background-color:blue;'> 
 
TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
    TEXT 2 <br> 
 
</div> 
 

 
<div id="third" name='third' style='background-color:green;'> 
 
TEXT 3<br> 
 
    TEXT 3<br>TEXT 3<br>TEXT 3<br> 
 
    TEXT 3<br>TEXT 3<br> 
 
    TEXT 3<br> 
 
    TEXT 3<br> 
 
    TEXT 3<br> 
 
    TEXT 3<br> 
 
</div>