2016-10-31 3 views
0

아래 코드가 작동하지 않는 이유는 누구나 알 수 있습니까? 고정 된 헤더의 높이 (여기서는 ID가 "jeden"인)를 기준으로 앵커의 대상으로 화면을 부드럽게 스크롤하기위한 것입니다. 이 기능에jQuery에서 간단한 스크롤이 작동하지 않습니다.

$(document).ready(function() { 

var headerHeight, part, place; 

function getOffsets() { 
    headerHeight = $('#jeden').height(); 
    part = $(this).attr('href'); 
    place = $(part).offset().top - headerHeight; 
} 

$(window).load(getOffsets).resize(getOffsets); 

$(function() { 
    $('a').click(function (e) { 
     $('html, body').animate({ 
      scrollTop: place 
     }, 'slow'); 

     return false; 
    }); 
}); 
}); 
+0

시도 - scrollTop :. $ (이) .offset() 상단 - $ ('#의 jeden ') .height() – Tasos

답변

0

;:

function getOffsets() { 
    headerHeight = $('#jeden').height(); 
    part = $(this).attr('href'); 
    place = $(part).offset().top - headerHeight; 
} 

는 더 범위가 없습니다. $(this)은 예외 또는 undefined을 반환 할 것이므로 여기에 무언가를 정의해야합니다.

+0

'part = $ ('div'). attr ('href');'로 변경했지만 여전히 작업에 유의합니다. 링크가 막 중단되었습니다. – bakrall

+0

당신이 창 크기를 조정할 때 창을 스크롤하고자하는 것은'div'입니까? –

+0

글쎄, 헤더에 링크가있는 페이지의 모든 부분이'href'에 해당하는 적절한'id'로'div's이기 때문에'div'를 넣었습니다. – bakrall

0

모든 도움을 주셔서 감사합니다 :) 나는 코드 작업을 할 수있었습니다. 나는 또한 코드를 메인 네비게이션의 링크에만 제한했다. 나는 그것을하지 않았다면 내 페이지의 탭 패널에있는 다른 링크가 작동을 멈췄을 것임을 발견했습니다. 그래서 메인 네비게이션의 링크에 .anchorHeader 클래스를줬고 다음과 같은 방법으로 코드를 재구성했습니다.

$(document).ready(function() { 

    var headerHeight, part, place; 

    function getOffsets() { 
     headerHeight = $('#jeden').height(); 
    } 

    $(window).load(getOffsets).resize(getOffsets); 

    $(function() { 
     $('.headerAnchor').click(function() { 
      part = $(this).attr('href'); 
      place = $(part).offset().top - headerHeight; 

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

      return false; 
     }); 
    }); 
}); 

창 크기를 조정할 때 완벽 또한 작동 -이 포럼에서 발견 된 제안에 감사 : https://forum.jquery.com/topic/scrolling-when-resizing-window

관련 문제