id를 포함한 jQuery 부드러운 스크롤 전체 URL

Question

전체 URL을 사용하여 부드러운 스크롤을 사용하는 방법에 궁금한 점이 있습니다.

이

은

<nav class="primary-nav"> 
    <ul> 
    <li><a href="http://domainname.com/">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#services">Services</a></li> 
    <li><a href="http://domainname.com/contact">Contact</a></li> 
    </ul> 
</nav> 

이

<nav class="primary-nav"> 
    <ul> 
    <li><a href="http://domainname.com/">Home</a></li> 
    <li><a href="http://domainname.com/#about">About</a></li> 
    <li><a href="http://domainname.com/#services">Services</a></li> 
    <li><a href="http://domainname.com/contact">Contact</a></li> 
    </ul> 
</nav> 

을 사용하려는 탐색하고이 페이지의 섹션으로 스크롤하는 데 사용되는 jQuery 코드이다.

function smoothScroll(duration) { 
$('a[href^="#"]').on('click', function (event) { 
    var target = $($(this).attr('href')); 
    if (target.length) { 
    event.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, duration); 
    } 
    }); 
} 

어떤 도움을 주셔서 감사합니다.

Answer 1

나는 당신이 동일한 페이지에 머물고 싶어한다는 것을 이해한다. 다만, 내부 링크가 절대적으로 필요한 어떤 이유로 든.

절대 URL과 내부 연결을 달성하기 위해 당신이 그런 식으로 변경할 수 :

자바 스크립트 :

var duration = 1000; 
var domainname = 'http://domainname.com/'; 

$('a[href^="'+domainname+'#"]').on('click', function (event) { 
    var target = $(this).attr('href'); 
    if (target.length) { 
    event.preventDefault(); 

    target = $(target.replace(domainname, '')); 

    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, duration); 
    } 
    }); 

설명 : 그것은 '# 정보'하지만 같은 URL을 활성화하도록 사용자 선택을 변경 'http://domainname.com/#about'. 그런 다음 도메인 이름 부분을 자르고 '#about'과 같은 내부 링크를 다시 갖게됩니다.

바이올린 : https://jsfiddle.net/u5dL9rt3/