If you are looking for Smooth Scrolling to DIV then you are at the right place. In the previous tutorial, we created about Back to Button. Today, we are going to create a smooth scroll to DIV. If you have smooth scrolling to your web page, it can give a better user interface on your web page projects. The feature of this simple work is to reduce the efforts of the users to scrolling the web page in a certain DIV. Read Also: Back to Top using Button with jQuery and CSS We have LIVE DEMO, kindly click the button below.

JavaScript

Kindly include the jQuery library to the HEAD tag of your web page. This simple script helps us to have a smooth scroll effect to DIV.

Create Markup

This simple HTML source code where we can find the attribute value for the anchor link include the ID name of the DIV tag.

How to Create Smooth Scroll to DIV using jQuery

---

Part 1 | Part 2 | Part 3 | Part 4 | Part 5

Part 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam placerat lacus tortor, et eleifend turpis consectetur non. Donec felis purus, luctus eget ornare non, elementum ut diam. Phasellus sollicitudin justo ac nulla viverra, vel dapibus nisl sagittis. Sed sed enim non lorem dictum volutpat. In hac habitasse platea dictumst. Quisque tellus neque, condimentum sit amet mattis et, fringilla sit amet odio. Donec velit libero, dictum vitae interdum a, sollicitudin ac ipsum. Ut tincidunt, dui at interdum placerat, nunc sapien dictum dolor, sit amet suscipit mi erat at enim.

Part 2

back-to-TOP

Proin ut turpis eget dolor consequat convallis vitae nec tortor. Maecenas pellentesque tortor eu enim commodo, nec facilisis elit imperdiet. Quisque imperdiet ex magna, vel finibus nibh dapibus ut. Vivamus non arcu euismod ligula lacinia tristique. Nunc vestibulum malesuada pharetra. Ut suscipit, felis ac ornare semper, justo nulla pharetra nunc, vitae interdum massa nisi ut magna. Praesent cursus dolor diam, sit amet porttitor leo semper id. Aenean convallis scelerisque ante, quis eleifend eros tincidunt eget. Curabitur cursus neque ac sem suscipit lobortis. Sed sed odio tempus, laoreet sapien sit amet, maximus nisi.

Part 3

back-to-TOP

Nulla porttitor erat et vulputate porta. Vestibulum at arcu lectus. Cras tincidunt, leo ac porttitor dignissim, odio enim mattis lorem, eget placerat eros ipsum sed odio. Sed ullamcorper ligula neque, non condimentum lectus egestas sed. In sit amet mauris non ligula finibus tempus. Maecenas mi felis, commodo vitae libero ac, bibendum tempor lorem. Suspendisse iaculis porta urna. Maecenas sit amet condimentum sapien. Cras eu porttitor odio. Fusce vulputate gravida rhoncus.

Part 4

back-to-TOP

Nulla sapien tellus, venenatis et libero eget, posuere viverra augue. Phasellus lectus ipsum, vestibulum quis magna at, dignissim euismod mi. Praesent laoreet ipsum ut enim luctus laoreet. Phasellus congue nulla et nulla porttitor, vel facilisis tortor tincidunt. Nulla malesuada nec lorem id porttitor. Nam sem ipsum, volutpat in pellentesque eu, sollicitudin vel velit. Curabitur orci mauris, ullamcorper id nunc non, sollicitudin accumsan erat.

Part 5

back-to-TOP

Vestibulum luctus cursus ligula at consectetur. Sed interdum eget dolor vel gravida. Donec euismod vehicula hendrerit. Nam suscipit pulvinar interdum. Quisque dictum ut quam quis euismod. Donec id tempor felis. Phasellus gravida, est faucibus lobortis facilisis, leo ligula dictum velit, vitae iaculis ante nisi eget quam. Mauris sit amet ipsum sed ligula cursus facilisis vitae ut urna. Phasellus viverra nisi at pretium lacinia. Nunc placerat turpis non velit vestibulum pellentesque. Sed tincidunt odio lectus, in dapibus ligula placerat sed.

Read Also: Back to Top using Button with jQuery and CSS Hope that this simple tutorial that I created may help you to your future web projects. Click the Download Code button to have a full source code of this simple tutorial.