Jquery로 Div ID로 스크롤

Question

CSS 속성으로 인해 div 태그로 스크롤하는 데 너무 많은 여백이 있습니다. 그래서 jquery가이 문제를 해결하는 가장 좋은 해결책이라고 생각합니다.

이것이 작동하지 않는 이유가 확실하지 않아 Js와 Jquery에 대해 매우 익숙합니다. 도움을 주시면 큰 도움이됩니다.

다음은 Js에 대한 간략한 설명입니다. 나는 당신의 DIV ID가 컨테이너에있을 때 ('컨테이너)

Here is my jsfiddle

 jQuery(document).ready(function($){ 
var prevScrollTop = 0; 
var $scrollDiv = jQuery('div#container'); 
var $currentDiv = $scrollDiv.children('div:first-child'); 

var $sectionid = 1; 
var $numsections = 5; 

$scrollDiv.scroll(function(eventObj) 
{ 
    var curScrollTop = $scrollDiv.scrollTop(); 
    if (prevScrollTop < curScrollTop) 
    { 
    // Scrolling down: 
     if ($sectionid+1 > $numsections) { 
      console.log("End Panel Reached"); 
     } 
     else { 
      $currentDiv = $currentDiv.next().scrollTo(); 
      console.log("down"); 
      console.log($currentDiv); 
      $sectionid=$sectionid+1; 
      console.log($currentDiv.attr('id')); 
      var divid =$currentDiv.attr('id'); 
      jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow'); 
      } 
    } 
    else if (prevScrollTop > curScrollTop) 
    { 
    // Scrolling up: 
     if ($sectionid-1 == 0) { 
      console.log("Top Panel Reached"); 
     } 
     else { 
      $currentDiv = $currentDiv.prev().scrollTo(); 
      console.log("up"); 
      console.log($currentDiv); 
      $sectionid=$sectionid-1; 
      var divid =$currentDiv.attr('id'); 
      jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow'); 

      } 
    } 
    prevScrollTop = curScrollTop; 
}); 
}); 

Answer 1

내가 당신이 원하는 것을 완전히 확실하지 않다하지만 스크롤에 ('HTML, 몸 ')을 변경하는 것을 발견 <div>과 jQuery는 코드보다 간단합니다. 이 코드는 부드러운 스크롤과 앵커의 자동 점프 동작을 대체 예를 들어

는 :

var top = $($this.attr('href')).offset().top - 10; 

I을 :

$(document).ready(function(e){ 
    $('.side-nav').on('click', 'a', function (e) { 
     var $this = $(this); 
     var top = $($this.attr('href')).offset().top; 

     $('html, body').stop().animate({ 
      scrollTop: top 
     }, 'slow'); 

     e.preventDefault(); 
    }); 
}); 

당신은 물론 추가하거나 좋아 그것에서 제거하여 top 변수를 조정할 수 있습니다 또한 HTML 상단에있는 바이올린을 만들었습니다. http://jsfiddle.net/Qn5hG/8/

이렇게해도 도움이되지 않으면 질문이 다른 것입니다, 그것을 명확히하십시오!

---

편집 : 당신의 바이올린과

문제는 :

• jQuery를이
• JQuery와 프레임 워크 "는 onLoad"으로 선택한 경우 당신은 jQuery(document).ready() 필요하지 않습니다 참조되지 않습니다. 자바 스크립트의 첫 번째 줄과 마지막 줄을 제거하십시오.
• HTML에 div#container이 없으므로 어디서 스크롤되는지 확인할 필요가 없습니다. 스크롤 이벤트는 결코 실행되지 않습니다.
• HTML이 유효하지 않습니다. 끝에는 닫히지 않은 요소와 무작위 태그가 많이 있습니다. 그것이 유효한지 확인하십시오.
• 귀하의 바이올린이해야 할 일을 파악하는 것은 매우 어렵습니다.