//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.