jQuery: The Basic Smooth Scrolling

animate()

---

Perform a custom animation of a set of CSS properties.

scrollTop()

---

Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

---

For instance, if you click the left cursor-floating navigation (desktop view) of this blog, you'll see the "Top" button. That button triggers the animate() transition of the scrollTop() method.

This is the snippet of that button: $(".button-class/#button-ID").click(function () { $("html, body").animate( {scrollTop: 0}, [duration] ); });

The script will trigger the transition of the vertical scroll bar to 0px top position. You need to change [duration] with an integer that represents the transition's timing length (in milliseconds), such as 500, 1000, 3000, 1234, etc. The bigger the number the longer the transition will be.

Anyway, we can call another function after the first transition is completed.

The structure looks like this: $("button-selector").someEvent(function () { $("id/class/tag/attr").animate({ cssProperty1: 'value1', cssProperty2: 'value2', cssProperty3: 'value3' }, [duration], function () { // callback function }); });

someEvent there can be replaced by click, mouseover, mouseout, focus, blur, etc etc, or even bind multiple events at once.

---

Scroll to the bottom of page demo
Let's see another example, this basic button. Click it, and you'll be scrolling down to the bottom of this post.

---

This is the CSS, HTML element, and the script snippet of it:
<!--the styling--> <style> .scroll-bottom{ display:block; font-size:1.5em; margin:auto; font-family:monospace; padding:10px 20px; border-radius:6px; } </style> <!--the button element--> <button class='scroll-bottom'>KLEEK</button> <!--the script--> <script> $(".scroll-bottom").click(function () { //get the current document height var height = $(document).height(); //trigger animation $("html, body").animate( {scrollTop: height}, 1500 ); }); </script>

---

Scroll to certain position
$(".button-class/#button-ID").click(function () { var position = $("reference_element_selector").offset().top; // returns number (no unit) $("html, body").animate( {scrollTop: position}, [duration] ); });

You need to change $("reference_element_selector") with the element on your page you want to scroll to on button click.

---

Only scrollTop(), without animate() method
$(".button-class/#button-ID").click(function () { $("html, body").scrollTop(0); });

That button click will trigger the "back to top" of HTML page without any transition/animation.

---

Links

• jQuery API animate() method
• jQuery API scrollTop() method
• Events methods at jQuery API Documentation