부드러운 스크롤 앵커 jquery

-2

앵커 URL '및 부드러운 스크롤로 내비게이션을 만들고 싶습니다. 하지만 그 페이지에서 저는 높이가 88px 인 끈적한 헤더를 사용합니다.부드러운 스크롤 앵커 jquery

product-anchor-links-action 클래스를 기반으로 부드러운 스크롤을 만드는 방법은 무엇입니까?

JSFiddle : https://jsfiddle.net/rx0txmek/2/

나의 현재 HTML :

<div class="product-page-nav"> 
    <div class="container"> 
    <ol class="product-anchor-links-list"> 
     <li class="product-anchor-links-item"><a href="#productbeschrijving" class="product-anchor-links-action">Nav 1</a></li> 
     <li class="product-anchor-links-item"><a href="#specificaties" class="product-anchor-links-action">Nav 2</a></li> 
     <li class="product-anchor-links-item"><a href="#reviews" class="product-anchor-links-action">Nav 3</a></li> 
    </ol> 
    </div> 
</div>

jQuery를 :

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
});

출처

2016-10-19 Henk Z

에는 $ ('. stickyHeader')가 존재하지 않는 경우'reviews', 맞죠?! .... 정말하지 마십시오 질문은 jsFiddle에서 모두 필요하기 때문에 코드를 이해하기 위해 많은 노력을 기울이지 않은 것 같습니다. –

@ A.Wolff 답장을 보내 주셔서 감사합니다. 예, 나는 그것을 알고 있었지만, 나는 바이올린을 바꿨습니다. 그래서 그것은 완료되었습니다. 단 한 가지로는 나는 그것을 올바르게 할 수 없다/일하고있다. 부드러운 두루마리가 작동하지 않고 클래스를 기반으로합니다. –

jsFiddle이 예상대로 작동하므로 예상했던 것 대신 설명하십시오. '그것이 계급을 기반으로 한 것'당신은 무엇을 의미합니까? –

는 그냥 scrollTop 값에서 끈적 끈적한 헤더의 높이를 뺍니다. sticky가 없으면 값은 0이됩니다 (sticky가 항상 존재하면 .height() 값을 사용할 수 있습니다).

$('a').click(function(){ 

    var stickyHeight = $('.sticky').length ? $('.sticky').height() : 0 

    $('html, body').animate({ 
     scrollTop: $($(this).attr('href')).offset().top - stickyHeight 
    }, 500); 
    return false; 
});

당신은 알고 당신이 ID로 모든 요소가없는

출처

2016-10-19 10:27:56 poisonborz

감사! 잘 작동하지만 의 클릭을 확인하고 'product-anchor-links-action' 클래스를 기반으로하지 않습니다. 어떻게 바꿀 수 있습니까? –

위의 코드에서 'a'는 선택 자입니다. 따라서 $ ('a')를 클릭하고 $ ('product-anchor-links-action')을 클릭하십시오. – poisonborz

부드러운 스크롤 앵커 jquery

답변

관련 문제