两个窗口滚动功能发生冲突并运行两次

Question

外观：

这就像一个迷你滚动条，所以

1. 拖放#draggable将触发html滚动移动。
2. 不使用滚动条，当您向上或向下滚动#draggable时会自动转到合适的位置。

当我拖放#draggable时出现问题，然后html滚动移动，它触发$(window).scroll(function()。 #draggable上升或下降然后到达合适的位置。

$(document).ready(function(){
  $( "#draggable" ).draggable({axis: "y", grid: [ 0, 55 ], containment: "parent"});
  var scrollT = $(document).scrollTop();
  var visualT = $("#visual").offset().top;
  var strengthT = $("#strength").offset().top;
  var portfolioT = $("#portfolio").offset().top;
  var contactT = $("#contact").offset().top;

  $( "#droppable01" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#visual").offset().top
    }, 1000);
   }
  });
  $( "#droppable02" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#strength").offset().top
    }, 1000);
   }
  });
  $( "#droppable03" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#portfolio").offset().top
    }, 1000);
   }
  });
  $( "#droppable04" ).droppable({
   drop: function(){
    $('html, body').stop().animate({
     scrollTop: $("#contact").offset().top
    }, 1000);
   }
  });

  $(window).scroll(function(){
   if(scrollT < 1000){
    $("#draggable").css({"top":"0px"});
   }
   if(scrollT >= 2000){
    $("#draggable").css({"top":"55px"});
   }
   if(scrollT >= 3000){
    $("#draggable").css({"top":"110px"});
   }
   if(scrollT >= 4000){
    $("#draggable").css({"top":"165px"});
   }
  });
});

#pageDesc{width:16px; text-align:center; position:fixed; top:375px; right:75px; font-size:16px;}
#pageDesc p{height:175px;  margin:20px 0; position:relative;}
#pageDesc .line{display:inline-block;width:1px; height:100%; background-color:#333; }
#draggable{z-index:3; display:block; width:9px; height:9px;border:1px solid #333; border-radius:100%; position:absolute; left:3px; top:0; transition:all 1s;}

/*#draggable.top0{top:0px;}
#draggable.top55{top:55px;}
#draggable.top110{top:110px;}
#draggable.top165{top:165px;}*/
#pageDesc ul{z-index:1;width:100%; height:100%; position:absolute;left:0; top:0;}
#pageDesc ul li{width:100%; height:24%; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<div id="pageDesc">
 01
 <p>
  <span class="line"></span>
  <span class="point" id="draggable"></span>
 </p>
 04
 <ul>
  <li id="droppable01"></li>
  <li id="droppable02"></li>
  <li id="droppable03"></li>
  <li id="droppable04"></li>
 </ul>
</div>

我尝试更改$("#draggable").css({"top":"0px"});

1. 达到#draggable的{​​{1}}高度。
2. 到attr('style', "top:;");

这些都不起作用。