Проблема с JS путевых точек и якорными ссылками

У меня есть куча статей на странице, я использую Waypoints JS для запуска scrollTop и привязки статьи к верхней части страницы, когда она входит в область просмотра, и это отлично работает. У меня также есть фиксированное меню вверху с хеш-ссылками, которые должны плавно переходить к определенным закрепленным частям страницы. Проблема в том, что когда я нажимаю ссылку в меню (скажем, третья статья): страница быстро прокручивается до третьей статьи (как и предполагалось), но затем она автоматически прокручивается до первой статьи, а затем переходит к снова третий, затем до второго и, наконец, снова до третьего.

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

HTML

<ul>
<li id="btn1"><a href="#art1">Article 1</a></li>
<li id="btn2"><a href="#art2">Article 2</a></li>
<li id="btn3"><a href="#art3">Article 3</a></li>
</ul>
<article id="art1">content</article>
<article id="art2">content</article>
<article id="art3">content</article>

JS

//smooth scroll
$('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) {
            $('body, html').animate({
                scrollTop: target.offset().top
            }, 500);
            return false;
        }
    }
});

//scroll snap to article 1
var waypoint = new Waypoint({
    element: document.getElementById('art1'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art1').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

//scroll snap to article 2
var waypoint = new Waypoint({
    element: document.getElementById('art2'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art2').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

//scroll snap to article 3
var waypoint = new Waypoint({
    element: document.getElementById('art3'),
    handler: function (direction) {
        if (direction === 'down') {
            $('html,body').animate({
                scrollTop: $('#art3').offset().top - 100
            }, 'slow');
        }
    },
    offset: '99%',
});

Спасибо за помощь.


javascript scroll hyperlink scrolltop jquery-waypoints
person Rafael    schedule 17.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я уверен, что уже слишком поздно, чтобы помочь вам, но я столкнулся с той же проблемой.

Я хотел иметь смещение над моими ссылками, как и вы, но я понял, что событие animate вызывает срабатывание waypoints.js.

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

css:

#art1,#art2,#art3{
  margin-top: -50px;
  padding-top: 75px;
}

а для JS используйте обычный location.hash,

window.location.hash = "#art1";
person Jeff P.    schedule 30.11.2016