Форум Сайтостроение Веб-строительство

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

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

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

При этом 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
469
Sitealert
#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
435
ivan-lev
#2 

$('a[href^="#"]').on('click'...
... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
[Удален]
#3

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

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

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

IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#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.. или с расходами на выпадающие менюшки/слайдеры и прочее.. решать

6000 символов - "простыня" JS менюшка/слайдер, помогите :) TizerDivision - ротатор тизеров,
[Удален]
#6

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

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

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

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

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