添加平滑滾動的JavaScript WordPress的

Question

我有三個div的：

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

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

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

現在我需要添加一個簡單的JavaScript將順利滾動（具有光滑的CSS3動畫）時點擊內一個錨標籤。

例如：當我點擊<a href="#main">Go to bottom</a>它會順利滾動到主div。我需要在我的Wordpress上實現這一點。

我希望你們能幫上忙。 謝謝！

Answer 1

使用Nicescroll JS，我甚至在我的WordPress網站使用：

請點擊此鏈接：

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

Answer 2

難道這樣的事情你找

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>