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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Smooth scroll to div using jQuery</title> <style> h1{font-size: 40px;} p{ font-size: 35px;} #top a {padding: 10px;} </style></head><body><div class="container"> <div class="row"> <div class="col-lg-12"> <div id="top"> <a href="#section1">Go Section 1</a>| <a href="#section2">Go Section 2</a>| <a href="#section3">Go Section 3</a>| <a href="#section4">Go Section 4</a>| <a href="#section5">Go Section 5</a> </div> <div id="section1"> <h1>Section 1</h1> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> </div> <div id="section2"> <h1>Section 2</h1> <a href="#top">BackToTop</a> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> </div> <div id="section3"> <h1>Section 3</h1> <a href="#top">BackToTop</a> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> </div> <div id="section4"> <h1>Section 4</h1> <a href="#top">BackToTop</a> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> </div> <div id="section5"> <h1>Section 5</h1> <a href="#top">BackToTop</a> <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</p> </div> </div> </div></div> <script>$(function() { $('a[href*=#]:not([href=#])').click(function() { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); if (target.length) { $('html,body').animate({ scrollTop: target.offset().top }, 1000); return false; } });});</script></body></html> |
