ScrollTo tag

//1.CSS for demo purposes /* body, html{margin: 0; padding: 0;} body{height: 2000px;} .dots{position: fixed; left: 10px; top: 20%; font-size: 20pt; width: 10px; list-style: none;} .dots li a{float: left;width: 10px; height: 10px; border-radius: 50%; background-color: #fff; margin-top: 10px; text-decoration: none;} .scroll{height: 500px; border-top: 1px solid #000; width: 100%; display: block;} .scroll:nth-child(1){background-color: #008000;} .scroll:nth-child(2){background-color: #0099FF;} .scroll:nth-child(3){background-color: tomato;} .scroll:nth-child(4){background-color: #464646;} */ //2. JS $(document).ready(function(){ $(".scrollto").click(function (){ var sid = $(this).attr("data-id"); var id = parseInt(sid-1); var scrolltarget = $(".scroll"); $('html, body').animate({ scrollTop: $(".scroll:eq("+id+")").offset().top }, 2000); }); }); //3.HTML example /* <div class="scroll" data-id="1">1</div> <div class="scroll" data-id="2">2</div> <div class="scroll" data-id="3">3</div> <div class="scroll" data-id="4">4</div> <ul class="dots"> <li><a href="#" data-id="1" class="scrollto" title="Scroll to first"> </a></li> <li><a href="#" data-id="2" class="scrollto" title="Scroll to second"> </a></li> <li><a href="#" data-id="3" class="scrollto" title="Scroll to third"> </a></li> <li><a href="#" data-id="4" class="scrollto" title="Scroll to fourth"> </a></li> </ul> */

Be the first to comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.