Лучший способ плавной прокрутки к внутренней ссылке

Я искал и видел много примеров на эту тему, но я не мог найти лучший способ для себя.

Я немного знаком с JS и jQuery и хочу спросить о плавной прокрутке.

    <a name="urunler"></a>
<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    <li><a href="#ipanjur" class="uruna">Alüminyum (İthal / Yalıtımlı) Panjur</a></li>
    <li><a href="#opanjur" class="uruna">Otomatik Panjur</a></li>
    </ul>

У меня такая навигация. Это прокручивается мгновенно. Но я хочу делать это медленно. Какой самый короткий и простой способ для этого? Я больше знаком с JS и не хочу скачивать и использовать JS-плагины.

  1. Мне нужно знать полный синтаксис с методом щелчка для моих ссылок (все они имеют один и тот же класс)
  2. Должен ли я удалить href park из ссылок?

Жду вашей помощи и все еще ищу

РЕДАКТИРОВАТЬ !!!: В этой ситуации мне нужен только один класс. Можно ли указать это свойство для нескольких классов?

    function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});

У меня есть ('click', 'a.uruna', function(), как мне сюда вставить еще один класс или надо просто написать:

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
$(document).on('click', 'a.new', function () {
    scrollToElement($(this).attr('href'));
});

javascript scroll jquery anchor smooth
person Diga    schedule 02.09.2013    source источник

Ответы (3)


arrow_upward
3
arrow_downward

HTML:

<ul>
    <li><a href="#ppanjur" class="uruna">Plastik Panjur</a></li>
    [...]
</ul>

JS:

function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this).attr('href'));
});

or

function scrollToElement (obj) {
  $('html, body').animate({
    scrollTop: obj.offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
  scrollToElement($(this));
});
person JohnJohnGa    schedule 02.09.2013
comment
не мог использовать этот код. Можете ли вы объяснить часть ‹head› или показать с демо? - person Diga; 02.09.2013
comment
Мне жаль. Я уверен, что ваш метод сработает, но я думаю, что мне нужно импортировать jQuery. Я этого не знал, никогда с ним не работал. Спасибо за вашу помощь. - person Diga; 02.09.2013

arrow_upward
1
arrow_downward

Я заметил, что с ответом JohnJohnGa вы получаете «мерцание» (по крайней мере, для Google Chrome), когда страница сразу же появляется в позиции привязки href и обратно, прежде чем она плавно прокручивается. Это может быть незаметно на быстром компьютере, но определенно было заметно на том, на котором я работал. Чтобы обойти это, я сделал следующее:

$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
    window.history.pushState(null, null, $($anchor.attr('href')).selector);
});

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

person Mike    schedule 01.08.2015

arrow_upward
-1
arrow_downward

Живая демонстрация: http://jsfiddle.net/wVEAy/2/

Обратите внимание, что в этом случае вам потребуется элемент с тем же id, что и элемент, указанный в теге href вашей ссылки:

function scrollToElement (selector) {
  $('html, body').animate({
    scrollTop: $(selector).offset().top
  }, 2000);    
};

$(document).on('click', 'a.uruna', function () {
    scrollToElement($(this).attr('href'));
});
person Alvaro    schedule 02.09.2013
comment
Спасибо за вашу помощь. Я думаю, что мне пришлось импортировать jquery для этого. Я этого не знал. Как я уже сказал, я мало знаю о JS и jQuery. Импортировал и все заработало спасибо. - person Diga; 02.09.2013
comment
какой тут смысл? пытаетесь заработать репутацию, копируя/вставляя ответ от кого-то другого? - person JohnJohnGa; 02.09.2013