2015-09-05 5 views
1

Я пытаюсь реализовать ту же структуру, что и phptherightway.com. По мере того как вы прокручиваете правую главную страницу, левая сторона прыгает вниз через якоря, я думаю, поскольку она выделяет левую сторону. Как я могу воссоздать это? Можно ли это сделать только с помощью якорных тегов или мне нужно что-то более продвинутое, например jQuery?Создание якорных тегов прокручивается плавно при прокрутке вниз по странице

Справа ли это использовать?

  • < A HREF = "# пример">

В то время как левая сторона использует? - < имя = "пример">

+1

возможно дубликат [JQuery гладкой прокрутки при щелчке на ссылку якорной] (http://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link) – AleshaOleg

ответ

2

Если нажать эту ссылку якорный:

<a href="#example">Click Me</a> 

страница будет прыжок к:

<div id="example">....</div> 

Теперь, если вы хотите, чтобы страница прокрутите до раздела #example вместо прыгая, вам нужно будет использовать jQuery scroll().

Вот простой JQuery пример того, как scroll может быть использован:

$(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; 
     } 
    } 
    }); 
}); 

Вот jsfiddle с вышеприведенным сценарием: http://jsfiddle.net/AndrewL32/65sf2f66/23/