Прокрутка к якорю без изменения URL

Xaron
На сайте с 24.05.2012
Offline
77
328

Нужно, чтобы при нажатии на ссылку с якорем (навигация по странице) проматывалось до якоря.

При этом URL имел бы вид:

site.ru/page.html без #div1

Нашел вот такой код

HTML:


<a href="#div1">Link1</a>
<!-- you can put <br /> here to see effect -->
<div id='div1'>link1 points me!!</div>
<!-- <br /> here, too, to see effect -->

JavaScript/JQuery:


<script>
$(document).ready(function(){
$('a').on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 900);
});
})
</script>

Взят отсюда: http://qaru.site/questions/307995/scroll-with-anchor-without-in-url

Работает как надо, но тогда все обычные ссылки на другие страницы не нажимаются.

Как сделать, чтобы обычные ссылки работали?

S
На сайте с 30.09.2016
Offline
459
#1
Xaron:
Как сделать, чтобы обычные ссылки работали?

Как-то так

<script>

$(document).ready(function(){
$('a').on('click', function(event) {
if($(this).attr('href').charAt(0)!='#')return true;
event.preventDefault();
var hash = this.hash;
$('html, body').animate({scrollTop: $(hash).offset().top}, 900);
});
})
</script>
Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
IL
На сайте с 20.04.2007
Offline
412
#2

$('a[href^="#"]').on('click'...
[Удален]
#3

Sitealert, ivan-lev, на мой взгляд лучше class добавить к таким ссылкам и обрабатывать событие клик именно на элементе с классом

Xaron
На сайте с 24.05.2012
Offline
77
#4

Благодарю, оба варианта сработали как надо.

IL
На сайте с 20.04.2007
Offline
412
#5
burunduk:
лучше class добавить к таким ссылкам и обрабатывать событие клик именно на элементе с классом

Лучшее, говорят, враг хорошего.. )

Если, к примеру, "якоря" в статье (а-ля содержание) указываются в WYSIWYG-редакторе админки, то автор (а если они ещё и меняются..) может банально забыть класс добавить.

p.s. Для аргументированных рассуждений на тему производительности vs удобство предлагаю: https://jsfiddle.net/wo9pfk8v/

Для 10k обращений при наличии 1000 ссылок на странице.

By class: 4606 ms
By regexp: 4989 ms

Не скажу, что класс намного быстрее.

Если у ссылок убрать #якоря:

<a class="blabla"  href="blabla">
By class: 4680 ms
By regexp: 1703 ms

Если не совпадает класс и в ссылках нет якоря:

<a class="bla"  href="blabla">
By class: 355 ms
By regexp: 1436 ms

* для последнего варианта получается 0,15ms (vs 0,035) на далеко не последнем компьютере.. Насколько это соизмеримо, к примеру, со временем загрузки JQuery.. или с расходами на выпадающие менюшки/слайдеры и прочее.. решать

[Удален]
#6

ivan-lev, вопрос не в скорости, а в избежании ошибочного срабатывания если у внешней ссылки есть якорь ;)

IL
На сайте с 20.04.2007
Offline
412
#7
burunduk:
а в избежании ошибочного срабатывания если у внешней ссылки есть якорь

$('a[href^="#"]').on('click'...

Cработает, только если href у ссылки ^начинается с # ;)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий