Home
Copy
Run
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Jquery Scroll to Div Element</title> <script src="https://code.jquery.com/jquery-3.4.0.js"></script> <style> .navigation{ display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .navigation li{ margin: 0 5px; border: 1px solid rgba(0,0,0,.1); background-color: #333333; padding: 10px; color: #ffffff; cursor: pointer; } </style> <script> $(document).ready(function(){ $("#goToHTML").click(function(){ $('html, body').animate({ scrollTop: $("#html").offset().top }, 200); }); }); </script> </head> <body> <ul class="navigation"> <li id="goToHTML">HTML</li> </ul> <hr> <div> <h2>Home</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis magnam, laborum molestiae doloribus a illum porro odio reiciendis. Accusamus sunt officiis nostrum, vero repudiandae doloremque iusto totam asperiores consectetur velit?</p></div> <div> <h2>About</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum in placeat tempora corporis. Sit ipsum corrupti ratione suscipit ex voluptatum accusantium mollitia odit fugit! Dolorem amet nisi perferendis deserunt rem.</p> </div> <div> <h2>Contact</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error similique itaque reprehenderit repudiandae perferendis magni, ipsum alias et esse expedita id deleniti reiciendis? Odit nulla, assumenda iste aut earum adipisci.</p> </div> <div id="html"> <h2>HTML</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Exercitationem reprehenderit, culpa quasi laboriosam nesciunt itaque, officiis quas minus alias quo qui, eum ab voluptate quaerat perferendis corrupti cupiditate enim aperiam.</p> </div> <div> <h2>CSS</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium deserunt repellat id dolorum. Nostrum fuga doloribus necessitatibus, sequi rem tempora, qui dolore ipsum ullam tempore voluptates cumque repellendus temporibus quae.</p> </div> <div> <h2>JavaScript</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus quaerat autem distinctio ipsum culpa corrupti enim veritatis vitae, fuga voluptatibus odio? Voluptates, dolore earum ex tempora debitis iusto! Laborum, at!</p> </div> <div> <h2>jQuery</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut rerum blanditiis ipsum deleniti ad, non vero nemo officia necessitatibus quae sapiente assumenda nam molestiae vel commodi porro quidem facere? Aut.</p> </div> <div> <h2>PHP</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos dolor hic assumenda eius quod, deleniti ab tempore quas eligendi expedita amet laborum laboriosam quae culpa repudiandae, excepturi porro sed eveniet!</p> </div> <div> <h2>Node</h2> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat sunt quasi cupiditate iusto possimus, nostrum necessitatibus incidunt nesciunt unde numquam dolorem beatae assumenda totam culpa nihil natus minus aspernatur omnis?</p> </div> <div> <h2>React</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum perferendis tempore, qui vero asperiores, molestias itaque optio corporis impedit ad vitae eos recusandae officia libero. Accusamus nesciunt temporibus autem officiis?</p> </div> <div> <h2>Vue</h2> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium in eligendi sit! Illo earum nemo facere explicabo quasi atque eos fugiat hic eius, eum dolores quisquam ullam itaque architecto. Sapiente?</p> </div> <div> <h2>Angular</h2> <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Asperiores odit doloribus, consequuntur maiores consequatur, eligendi iste assumenda, ex animi dignissimos nulla saepe expedita quam aliquam! Itaque consequatur rerum architecto repudiandae?</p> </div> </body> </html>