Scrolling can improve usability of website dramatically. Scrolling with mouse can be a painful experience for visitors, especially on long pages.
Probably the easiest way to get things done fast is with the help of jQuery. There are many plug-ins for jQuery that can easy this job, but technically you don't need a plug-in just some of these reusable snippets.
Scroll to Anchor Text
Create the anchors within your page, easy way to make jumps in relevant content or guide/tutorial pages.
// HTML:
// <h1 id="anchor">Example</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
$("a.topLink").click(function() {
$("html, body").animate({
scrollTop: $($(this).attr("href")).offset().top + "px"
}, {
duration: 500,
easing: "swing"
});
return false;
});
});
Scroll to Top
Scroll to top have become a standard, every website need this.
$("a[href='#top']").click(function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
Scroll to Bottom
$(window).load(function() {
$("html, body").animate({ scrollTop: $(document).height() }, 1000);
});
Note the use of window.onload (when images are loaded...which occupy height) rather than document.ready.To make things proper, you just need to check the page height and substrack.
$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });
Load content on scroll
Simple code that does the effect similar to Facebook, Twitter and Google Plus –...