Smooth-прокрутка страницы начальной загрузки с липкой навигацией

Question

Скрипты с плавным прокруткой в ​​общем, прекратите действие ссылки по умолчанию (возвращая false), чтобы предотвратить переход в анимацию. Это также останавливает навигационные меню бутстрапа, чтобы свернуть при нажатии на ссылку (плохо).

Пример:
http://www.bootply.com/NoGAvuQGDE

В последней строке Гладкая скроллинга сценария;

• если вы вернетесь false, он конфликтует и останавливает закрытие меню при нажатии на ссылку.
• Если вы вернетесь true, анимация становится нервной из-за работы ссылки.

ВОПРОИЗВЕДЕНИЕ:

• нажмите на ссылку dropdown/action
• раскрывающийся остается открытым (плохой), из-за заблокированного действия по умолчанию

Исключение NavBar ссылки из сглаживанию прокрутка превзошла бы цель.

Идея:
Мы могли бы изменить плавную улитку скрипт, чтобы закрыть все меню NavBar, когда связь с гладкой прокруткой. Что-то вроде $('.dropdown-toggle').dropdown('collapse') будет работать, но в API нет действия «свернуть», только «переключение».

Q: Как я гладко прокрутки на загрузочной странице без него противоречащего меню NavBar, останавливая их закрыть?

---

smoothscroll сценарий для будущей ссылки:

$(function(){ 
    $('.navbar a[href*=#], a.smooth').click(function() {return smoothScroll(this)}); 
}); 

function smoothScroll(linkItem) { 

    if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'') 
    && location.hostname == linkItem.hostname) { 

     var $target = $(linkItem.hash); 
     $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']'); 

     if ($target.length) { 
     var targetOffset = $target.offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, 500); 
     return false; 
     } 
    } 
} 

Answer 1

При взгляде на дерево документа при переключении выпадающего меню функциональность Bootstrap полагается на класс open на родительском. В соответствующем коде, касающемся обработчиков событий (который немного нечетко читается), этот класс переключается.Ниже будет эмулировать его, когда поведение по умолчанию предотвращено в меню, которое является активным и, кажется, делают трюк:

dropdown = linkItem.closest('.dropdown'); 

if ($(dropdown).hasClass('open')) $(dropdown).removeClass('open'); 

Можно возразить ссылка только интерактивная, когда выпадающий открыта, так что даже этого должно хватить :

$(dropdown).toggleClass('open'); 

раскрывающийся список внутри другой потребуется некоторый дополнительный сценарий, но я предполагаю, что это вряд ли конфигурация. Взаимодействие с другими братьями и сестрами, видимо, тоже хорошо работает. Интегрированный в коде:

$(function(){ 
    $('.navbar a[href*=#]').click(function() {return smoothScroll(this)}); 
}); 

function smoothScroll(linkItem) { 

    if (location.pathname.replace(/^\//,'') == linkItem.pathname.replace(/^\//,'') 
    && location.hostname == linkItem.hostname) { 

     var $target = $(linkItem.hash); 
     $target = $target.length && $target || $('[name=' + linkItem.hash.slice(1) +']'); 
     var dropdown = linkItem.closest('.dropdown'); 

     if ($target.length) { 
     if (dropdown) $(dropdown).toggleClass('open'); 
     var targetOffset = $target.offset().top; 
     $('html,body').animate({scrollTop: targetOffset}, 500); 
     return false; 
     } 
    } 
} 

Когда только используя этот скрипт на якорных ссылках, это может быть упрощено, кстати:

$(function(){ 
    $('.navbar a[href*=#]').click(function() {smoothScroll(this)}); 
}); 

function smoothScroll(linkItem) { 

    var $target = $(linkItem.hash), 
    dropdown = linkItem.closest('.dropdown'); 

    if ($target.length) { 
    if (dropdown) $(dropdown).toggleClass('open'); 
    var targetOffset = $target.offset().top; 
    $('html,body').animate({scrollTop: targetOffset}, 500); 
    return false; 
    } 
} 

При получении ожидаемых результатов с тем, что было опубликовано в комментариях ранее, после дополнительной отладки код должен быть немного более тонким, чтобы найти правильного родителя - также добавлен дополнительный if (dropdown) чек. Нет необходимости применять метод к чему-то, что не существует, конечно.

http://www.bootply.com/hC4s6OEgA1

Answer 2

Один из способов сделать это, чтобы добавить дополнительный класс к пунктам меню навигации, которые нуждаются в плавной прокрутки, которая оставит другие пункты меню что вы не хотите прокручивать, чтобы работать по назначению.

Обновленное меню навигации HTML

<ul class="nav navbar-nav"> 
    <li class="smooth"><a href="#a">About</a></li> 
    <li class="smooth"><a href="#b">Contact</a></li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="http://www.google.com" target="_blank">Action</a></li> 
    </ul> 
    </li> 
</ul> 

и ваш обновленный JQuery:

$(function(){ 
    $('.navbar .smooth a[href*=#], a.smooth').click(function() {return smoothScroll(this)}); 
}); 

У меня есть added a JS.Fiddle, если вы хотите, чтобы он работал. Надеюсь, это поможет.