jquery setInterval or scroll

Question

I am working on a project where i need to listen to the scroll event.. i wonder what is a better approach..

1st Approach

 function scr         


        

Answer 1

Neither. I was just reading about JS/jQuery patterns. There is an example for the Window Scroll event: jQuery Window Scroll Pattern

var scrollTimeout;  // global for any pending scrollTimeout

$(window).scroll(function () {
    if (scrollTimeout) {
        // clear the timeout, if one is pending
        clearTimeout(scrollTimeout);
        scrollTimeout = null;
    }
    scrollTimeout = setTimeout(scrollHandler, 250);
});

scrollHandler = function () {
    // Check your page position
    if ($(window).scrollTop() > 200) {
        top.fadeIn();
    } else {
        top.fadeOut();
    }
    if (menuVisible) {
        quickHideMenu();
    }
};

Originally from here: Javascript Patterns

Answer 2

It worked fine for me

<style type="text/css">
    .scrollToTop {
        width:100px; 
        height:130px;
        padding:10px; 
        text-align:center; 
        background: whiteSmoke;
        font-weight: bold;
        color: #444;
        text-decoration: none;
        position:fixed;
        top:75px;
        right:40px;
        display:none;
        background: url('arrow_up.png') no-repeat 0px 20px;
    }

.scrollToTop:hover{
    text-decoration:none;
}

</style>

<script>
$(document).ready(function(){

    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    }); 
});
</script>

<a href="#" class="scrollToTop">Scroll To Top</a>

http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery