0

I have three divs:

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

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

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

Now I need to add a simple javascript that will scroll smoothly (with a smooth CSS3 animation) when click within an anchor tag.

Example: When I click on <a href="#main">Go to bottom</a> It will scroll then to the main div smoothly. I will need to implement this on my Wordpress.

I hope you guys could help. Thanks!

Rani Moreles Rubillos
  • 1,114
  • 7
  • 13
  • possible duplicate of this http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link – Manish Patel Dec 07 '16 at 05:10

2 Answers2

0

Use Nicescroll js, i have even use this in my wordpress site :

Follow this link :

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

Jigar7521
  • 1,549
  • 14
  • 27
0

Is it something like this your looking for

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>
Hudhaifa Yoosuf
  • 869
  • 2
  • 12
  • 28