2016-07-11 1 views
2

В этом JavaScript будет сглажен прокрутка ко всем хеш-ссылкам. Мне нужен id=nav и его результирующая хеш-ссылка, /#nav, которая будет игнорироваться приведенным ниже JavaScript. id=nav используется в режиме отклика меню, и когда он управляется приведенным ниже JavaScript, он разбивает меню.Существующий JavaScript, который плавно прокручивает до id, хотел бы помочь добавить исключение для определенного идентификатора

Может кто-нибудь, пожалуйста, сообщите, как я могу игнорировать определенный идентификатор в приведенном ниже JavaScript?

Также я сделал рабочую HTML-демонстрацию, которую вы можете увидеть ниже.

.top { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
a { 
 
    margin-left: 20px; 
 
    display: block; 
 
} 
 
#nav { 
 
    height: 800px; 
 
    background-color: #777; 
 
    display: block; 
 
} 
 
#test1 { 
 
    height: 800px; 
 
    background-color: #ccc; 
 
    display: block; 
 
} 
 
#test2 { 
 
    height: 800px; 
 
    background-color: #111; 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script> 
 
    $(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 - 80 
 
      }, 500); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <div class="top"> 
 
    <a href="#nav">nav</a> 
 

 
    <a href="#test1">1</a> 
 

 
    <a href="#test2">2</a> 
 
    </div> 
 

 
    <div id="nav"></div> 
 

 
    <div id="test1"></div> 
 

 
    <div id="test2"></div> 
 
</body>

+0

Почему бы просто не использовать условный для проверки конкретного хэша вы не хотите, чтобы перейти к? Улучшит читаемость. –

ответ

0

Добавьте эту строку сразу после 2-й линии JavaScript:

if($(this).attr("href") == "#nav") return; 

Так выглядит следующим образом:

$(function() { 
    $('a[href*="#"]:not([href="#"])').click(function() { 
     if($(this).attr("href") == "#nav") return; 
     //... Rest of code 

JSFiddle

Как это работает проверяет, что значение атрибута href для ссылки не указано "#nav". Если это так, функция возвращает false и не выполняется.

+0

Спасибо за помощь! Это технически работает, но он по-прежнему не работает для меня, поскольку он, кажется, отключает хеш, а не эффект js. Без моего js, щелкнув на хеше, обнаруживается отзывчивый навигатор через css [предполагаемый эффект], при этом мои js хешируют только свитки, а ваше исправление, похоже, удаляет эффект хэша все вместе и щелчок ничего не делает. –

+0

@TaylorOsborn Хорошо, я обновил свой ответ. Не могли бы вы, пожалуйста, попробовать еще раз? –

+0

Хорошее лаконичное исправление. Спасибо. –

0

Просто добавьте условие в свой селектор или совместите с селектором .not, как показано ниже.

.top { 
 
    position: fixed; 
 
    top: 0; 
 
} 
 
a { 
 
    margin-left: 20px; 
 
    display: block; 
 
} 
 
#nav { 
 
    height: 800px; 
 
    background-color: #777; 
 
    display: block; 
 
} 
 
#test1 { 
 
    height: 800px; 
 
    background-color: #ccc; 
 
    display: block; 
 
} 
 
#test2 { 
 
    height: 800px; 
 
    background-color: #111; 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script> 
 
    $(function() { 
 
    $('[href="#nav"]').click(function(e) {e.preventDefault; return false;}); // Use this line if you don't want to go to top. Personally I would not use anchors if their base functionality is removed. 
 
    $('a[href*="#"]:not([href="#"])').not('[href="#nav"]').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 - 80 
 
      }, 500); 
 
      return false; 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
</script> 
 

 
<body> 
 
    <div class="top"> 
 
    <a href="#nav">nav</a> 
 

 
    <a href="#test1">1</a> 
 

 
    <a href="#test2">2</a> 
 
    </div> 
 

 
    <div id="nav"></div> 
 

 
    <div id="test1"></div> 
 

 
    <div id="test2"></div> 
 
</body>

+0

Это не будет работать так, как если бы вы нажмете ссылку на навигацию, она по-прежнему попадает в верхнюю часть страницы, даже если она не прокручивается плавно. –

+0

Сценарий не применяется. Если вы не хотите прокручивать, зачем использовать якорь? Вы, конечно, можете запретить его (я отредактирую ответ). – zozo

+0

Я не знаю, почему OP использовал якорь, просто хотел указать на него. –

 Смежные вопросы

  • Нет связанных вопросов^_^