0

내부 링크를 사용하여 부드러운 스크롤로 '한 페이지 레이아웃'을 만들려고했습니다. 이것은 코드입니다 :변환 방법 "javascript : scrollto ('. class');" (외부에서 사이트의 특정 .class로 이어지는) 외부 링크로 이동합니까?

function scrollto(element) { 
$('html, body').animate({ 
    scrollTop: ($(element).offset().top - 40) 
}, 'slow'); }; 

따라서 고정 된 헤더가 있으므로 -40입니다.

스크립트는 구현 된 사이트 내에서 완벽하게 작동합니다. 링크의 내가 사용 : 클래스와

<a href="javascript:scrollto('.link1');">Go to Link 1</a> 

... 그리고 '태그'div의 : 내가 링크를 만드는 방법을 EXAMPLE SMOOTH SCROLLING

다른에 배치 :

<div class="link1"> 
     <h1>This is link no 1</h1> <p>Text</p> 
</div> 

다음은 예입니다 내 문서에 지정된 DIV로 연결되는 웹 사이트입니까? 일반적으로 앵커를 사용하여, 그것은 다음과 같습니다

<a href="example.html#link1">Go to Link 1</a> 

하지만 때문에 고정 헤더, 앵커를 사용하지 않는 정말 그들과 함께 좋은 경험이 없습니다.

내가 '외부'에서 약간의 div를 연결할 수

"javascript:scrollto('.link2');" 

그래서이 내부 링크를 변환하는 방법은 없나요?

귀하의 도움에 감사드립니다. 나는 많이 인터넷 검색을 해왔다. 대답을 찾을 수 없습니다. 나는 진보 된 자바 스크립트 사용자가 아니므로, 이해하십시오. 고맙습니다.

답변

0

UPDATE

이 페이지가 완전히로드 후 jQuery를 작동하게하는 것은 매우 중요합니다 :

$(window).bind("load", function() { 
    window.scrollTo = function (selector) { 
     if (selector === '') { return; } 
     return $('html, body').animate({ 
      scrollTop: $('.' + selector).offset().top - 117 
     }, 'fast'); 
    }; 
    $(document).ready(function() { 
     scrollTo(window.location.hash.replace(/^\#/, '')); 
    }); 
}); 
: 그 말의 스크립트는 다음과 같이한다 그래서

$(window).bind("load", function() { 
//code here... 
}); 

내 문제가 해결되었습니다.