2016-09-09 2 views
0

Просто интересно, как включить плавный прокрутки, используя полный URL-адрес.jQuery плавный прокрутки полный 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); 
    } 
    }); 
} 

Любая помощь будет большой благодарностью.

+0

Вы спрашиваете, если вы можете нажать на # со страницы, где # не существует и перейти на страницу, где она существует, то выделите этот #? – Tom

+0

Если домен находится там, он перезагрузит страницу/перейдет на новую страницу. Если вы хотите перейти на новую страницу и затем прокрутите страницу, вам нужно будет искать событие загрузки страницы и искать «#» в URL-адресе. –

+0

Похож на: - [https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link](https://stackoverflow.com/questions/7717527/smooth-scrolling- когда-click-an-anchor-link) –

ответ

0

Насколько я понимаю, вы хотите остаться на одной странице, просто по какой-то причине вы хотите, чтобы ваши внутренние ссылки были абсолютными.

Для достижения внутреннего связывания с абсолютными URL, вы можете изменить его так:

JavaScript:

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, как «#about», но 'http://domainname.com/#about'. Затем вы отключите часть имени домена, и у вас снова будет внутренняя ссылка, например '#about'.

Fiddle: https://jsfiddle.net/u5dL9rt3/

+0

Спасибо, Майкл, именно то, что я искал. – Ollie

+0

Я рад, что смогу помочь. Не могли бы вы отметить ответ, как принято? –

+0

См. Здесь, пожалуйста, как ответить/принять ответ: https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work –