在移动设备上使用javascript，jquery平滑滚动到页面顶部或底部

Question

I have a one page website which is divided into two parts on horizontal mobile view. So am trying to create a scroll/swipe effect to top or bottom of the page. I tried this code of detection

var bottomofDoc = $(".main_container").height();
$(window).scroll(function(){
        var cur_top = $(window).scrollTop();
        if(top < cur_top){
            direction = 'down';
            $('html,body').animate({scrollTop: $(document).height()}, 600);
            console.log(direction);
        }else{
            direction = 'up';
            $("html, body").animate({ scrollTop: 0 }, 600);
            console.log(direction);
        }
        top = cur_top;
    });

But it works buggy,with flickering and when i scroll once it continue doing actions many times. Any ideas how to achive smooth scrolling to top or bottom

Answer 1

$(function(){
     $('a[href*="#"]:not([href="#"])').click(function(){
          if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
               var target = $(this.hash);
               target = target.length ? target:$('[name=' + this.hash.slice(1) + ']');
               if(target.length){
                    $('html, body').animate({
                         scrollTop: target.offset().top
                    }, 1000);
                    return false;
               }
           }
     });
});