javascriptjqueryvertical-scrollingbottom-up

Scrolling top-bottom is not working


I have a problem with scrolling, 2 of if conditions activate all time after some delay. I can't understand why. Here is the site I have problem with: www.fitfaza.pl - the grey anchor in the right-bottom corner.

code:

// hide #back-top first
jQuery("#back-top").hide();
jQuery("#back-top2").hide();
// fade in #back-top
jQuery(function() {
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > 500) {
            jQuery('#back-top').fadeIn();
            jQuery('#back-top2').fadeIn();
        } else {
            jQuery('#back-top').fadeOut();
            jQuery('#back-top2').fadeOut();
        }
    });


    jQuery('#back-top a').click(function() {

        jQuery('body,html').animate({
            scrollTop: 0
        }, 800);
        return false;
    });

    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll <= 1089) {

            jQuery('#back-top2 a').click(function() {

                jQuery('body,html').animate({
                    scrollTop: 3390
                }, 800);
                return false;
            });
            $("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
                $('html, body').stop();
            });
        };
        if (scroll >= 3390) {

            jQuery('#back-top2 a').click(function() {

                jQuery('body,html').animate({
                    scrollTop: 1
                }, 800);
                return false;
            });
            $("html, body").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function() {
                $('html, body').stop();
            });
        };
    });

});

Solution

  • Here's an optimised script that seems to have it's effect - although I can't test the actual response on the site well without eliminating the current active script with any ease. So you may have to test it and give some feedback about it's functionality. Anyway, try replacing with this :

    http://codepen.io/anon/pen/pvMmyJ?editors=001

    $(function () {
    
      var gate = $(window);
      var root = $('html, body');
      var backtop = $('#back-top2');
      var scroll;
      backtop.hide();
    
      gate.scroll(function() {
    
        scroll = gate.scrollTop();
    
        if (scroll >= 500 && !backtop.is(':visible')) backtop.fadeIn();
        if (scroll < 500 && backtop.is(':visible')) backtop.fadeOut();
      });
    
      backtop.click(function() {
        if (scroll < 1090) root.animate({scrollTop: 3390}, 800);
        if (scroll >= 3390) root.animate({scrollTop: 0}, 800);
      });
    
      root.on('scroll mousedown touchstart DOMMouseScroll mousewheel keyup', function() {
        root.stop();
      });
    
    });
    

    Looking at the the page source of the site, the <a> tags around the anchor image aren't really necessary. And it seems the $ is not a reserved character so there would be no need to use jQuery for the object. Caching some variables that are reused optimises the script a bit as well.