When I attempt to click a button and scroll, I can easily achieve this with HTML (option 1). However, the scrolling motion is abrupt and I would prefer to have more control over the speed of the scroll.
I then experimented with jQuery (Option1) but I am unsure how to instruct it to scroll 100% of the window and adjust the speed. Is there a way to accomplish this using CSS and/or jQuery?
Option 1. Scroll with HTML:
http://jsfiddle.net/VPT4q/
<div id="first">
<a href="#second">
<div id="down"></div>
</a>
</div>
<div id="second"></div>
Option 2. Scroll with jQuery: http://jsfiddle.net/VPT4q/1/
$(function(){
$('#down').click(function() {
// window.scrollBy(0,200);
window.scrollTo(0,200);
});
})