Social Network for Web Professionals

Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Useful jQuery Various Scrolling Snippets and Plug-ins

jQuery SnippetsScrolling 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 – loading content on page scroll. Very useful for long pages.

var loading = false;

$(window).scroll(function(){

if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){

if(loading == false){

loading = true;

$('#loadingbar').css("display","block");

$.get("load.php?start="+$('#loaded_max').val(), function(loaded){

$('body').append(loaded);

$('#loaded_max').val(parseInt($('#loaded_max').val())+50);

$('#loadingbar').css("display","none");

loading = false;

});

}

}

});

$(document).ready(function() {

$('#loaded_max').val(50);

});

Horizontal Parallax Scrolling

For this one you will need plug-in, I have tested this one which is very easy to implement in your pages. There are many, but I've decided to use this one for the example. Parallax scrolling is new trend, that I personally think is very useful in terms of usage on mobile version of website.

jInvertScroll - A lightweight jQuery horizontal Parallax Plugin

https://www.pixxelfactory.net/jInvertScroll/

Here is how to make things work.

1.) Include the css file, jQuery and the Plugin
2.) Create the desired elements that you want to scroll (You can create normal divs, wich contain other elements, images, videos...)
3.) Assign following attributes to the elements you just created:

position: fixed;        // All scrollable elements have to be position:fixed
bottom: 0; // Make it stick to the bottom (or top)
width: xxxxpx; // I recommend to assign the width in px, prevents preloading issues

 
4.) Order the layers via z-index ) In your javascript, use this code (the selectors refer to the elements that you desire to be scrolled):

$.jInvertScroll(['yourselector1', 'yourselector2'...]);

Hope you will find this reusable snippets useful for you next project.
Rate this blog entry:
1
What to Expect from Mobile SEO in 2014
5 Web Design Trends Every Small Business Should Kn...

Related Posts

Comments

 
No comments yet
Already Registered? Login Here
Guest
Friday, 23 October 2020
If you'd like to register, please fill in the username and name fields.

Captcha Image