Simple smooth scrolling guide in 10 minutes

Tram Ho

  • Smooth scrolling (the change of position from the original link to the bottom position) is a very good animation for the website, giving a smooth and slick experience.

  • This is the code for smooth scrolling to a point on the same page. It integrates some logic to identify jump links, and does not target other links.

  • Consider the example below. When we click on the Go to Section2 tab it will move to section 2 . when clicking Go to Section 3 will move to section 3 . Click on top will return to the top

Generate HTML

  • Create ul list with 2 buttons click section 2 and section 3. so the attribute has href = # + id of the tag to scroll to
  • Create id when scroll comes

Create Jquery

  • First we determine the tag when we click on it will move to 1 position on the page we have. For example, when clicking Go to Section 2 it will move to h2 with id "two"

  • The next step is to move to the point where you need it to scroll. with the given time interval as the example below is 0.5s

See the demo in codepen below: