- 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <div id="page-wrap"> <h1 id="top">Smooth Page Scrolling</h1> <ul> <li><a href="#two">Go to Section 2</a></li> <li><a href="#three">Go to Section 3</a></li> </ul> <h2 id="one">Section 1</h2> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <h2 id="two">Section 2</h2> <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <h2 id="three">Section 3</h2> <p>quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> <p><a href="#top">Top</a></p> </div> |
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”
1 2 | var data_id = $(this).attr('href'); // trả ra id mà bạn click. ví dụ Go to Section 2 với href="#two" thì với đoạn này ta sẽ nhận dc #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
1 2 3 4 | $('html, body').animate({ scrollTop: $(data_id).offset().top }, '500'); |
See the demo in codepen below: