위로 조건 단추를 스크롤 할 때 위아래로 슬라이드 위로 이동합니다.

Question

위로 돌아 가기 버튼을 위로 또는 아래로 움직일 때를 결정할 때 사이에있는 것처럼 보입니다. 몇 번 아래로 내려 가면 다시 스크롤하여 같은 과정을 반복합니다. 가끔은 내가 아래로 모든 방법을 페이지에 가서 스크롤 버튼을 스크롤에서 최대 스크롤까지 scrolltop 속성은 생각도 0입니다. 만약 내 코드가 문제가 또는 사용하는 jquery 메신저 버전이 확실하지 오전 최신 jquery 버전 사용

$(document).ready(function(){ 
$(".totop").hide(); 

$(function(){ 
$(window).scroll(function(){ 
    if ($(this).scrollTop()>600) 
    { 
    $('.totop').slideDown(); 
    } 
    else 
    { 
    $('.totop').slideUp(); 
    } 
}); 

$('.totop a').click(function (e) { 
    e.preventDefault(); 
    $('body,html').animate({scrollTop: 0}, 500); 
}); 

}); 
}); 

Answer 1

나는 내 페이지에 동일한 코드가 있으며 jQuery 버전 1.6.4에서 잘 작동합니다. 나는 최신 jQuery 버전에서 그것을 테스트했고 실제로 그것의 동작을 변경했다. jQuery가 객체를 슬라이드하기 전에 객체를 표시하는 것처럼 보입니다. 내가 코드를 수정하고 스로틀/디버그 플러그 인을 추가하여 스크롤 이벤트를 여러 번 호출하지 않도록했습니다. 나는 지금 그것이 좋게 보인다라고 생각한다.

테스트를 고정 http://jsfiddle.net/QXJ53/

/* 
* jQuery throttle/debounce - v1.1 - 3/7/2010 
* http://benalman.com/projects/jquery-throttle-debounce-plugin/ 
* 
* Copyright (c) 2010 "Cowboy" Ben Alman 
* Dual licensed under the MIT and GPL licenses. 
* http://benalman.com/about/license/ 
*/ 
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this); 

$(document).ready(function(){ 

    $(".totop").hide(); 

    $(window).scroll($.throttle(1000, function(){ 

     if ($(window).scrollTop()>100) 
     { 
     $('.totop').slideDown(); 
     } 
     else 
     { 
      if($('.totop').is(':visible')){ 

       $('.totop').slideUp(); 
      } 

     } 
    })); 

    $('.totop a').click(function (e) { 
     e.preventDefault(); 
     $('body,html').animate({scrollTop: 0}, 500); 
    }); 

});