Tuesday, November 27, 2012

jQuery back to top script

This is an example how to make a back to top button using html and jQuery.

html
<h2 class="backToTop">back-to-top</h2>
<h2 class="backToTopFix">back-to-top</h2>

css
.backToTopFix{
       position:fixed;
       top:5px;
      display:none;
}

jQuery
       // get the distance from .stop to top
        var checkIfTop = jQuery(".stop").offset().top;
checkIfTop
        jQuery(window).scroll(function() {
      // if window top is greater than or equal to checkIfTop condition
            if(jQuery(window).scrollTop()>=checkIfTop){
                jQuery(".backToTop").hide();
                jQuery(".backToTopFix").show();
            }
            else{
                jQuery(".backToTop").show();
                jQuery(".backToTopFix").hide();
            }
        });

No comments:

Post a Comment