При использовании кода плавной прокрутки jQuery ссылки на внешние страницы не работают - PullRequest
0 голосов
/ 01 апреля 2020

Я не JS разработчик, и я использую Bootstrap для создания одностраничного сайта с якорными ссылками.

Я использую любые фрагменты кода JS, которые я найду для некоторых необходимых функций, таких как добавление плавной прокрутки к ссылкам привязки, с верхним смещением, потому что я использую фиксированное / закрепленное меню.

Хотя это одностраничный веб-сайт, я использую Конфиденциальность и Условия как отдельные страницы.

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

 $('.navbar a, .smooth-scroll-contact').on('click', function(event) {

    /* Make sure this.hash has a value before overriding default behavior */
    if (this.hash !== "") {

        /* Prevent default anchor click behavior */     
        event.preventDefault();

        /* Store hash */
        var hash = this.hash;

        /* Using jQuery's animate() method to add smooth page scroll. */
        $('html, body').animate({
            scrollTop: $(hash).offset().top - 70
        }, 800, function(){    

            /* Add hash (#) to URL when done scrolling (default click behavior). */
            if (history.pushState) {
                history.pushState(null, null, hash);
            }
            else {
                window.location.hash = hash;
            } 
        });

    } // End if

  });

Хотя он отлично работает на домашней странице, он не позволяет открывать ссылки меню на страницах конфиденциальности и условий. Он ничего не делает при нажатии на ссылки меню там. Это не go на главную страницу или любую из ссылок там.

Это ошибка, которая появляется в консоли при нажатии на ссылки меню, а также на странице конфиденциальности или условий:

Uncaught TypeError: Cannot read property 'top' of undefined
    at HTMLAnchorElement.<anonymous> (custom.js:39)
    at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
    at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)

39-ая строка - scrollTop: $(hash).offset().top - 70.

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

Дополнительные примечания:

  • Если я уберу код с плавной прокруткой, проблема будет решена;
  • custom.js файл, в котором найден код, загружается до </body>;
  • jQuery - это первый загруженный скрипт.

Если вам нужна дополнительная информация, дайте мне знать.

1 Ответ

0 голосов
/ 04 апреля 2020

Мне, наконец, удалось найти решение после дополнительных исследований. Вот новый код, на случай, если кто-то еще столкнется с той же проблемой:

$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.on('click', function(event) {   

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {

        // Store hash
        var hash = this.hash;

        // Using jQuery's animate() method to add smooth page scroll
        // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
        // - 70 is the offset/top margin
        $('html, body').animate({
            scrollTop: $(hash).offset().top - 70
        }, 800, function() {

            // Add hash (#) to URL when done scrolling (default click behavior), without jumping to hash
            if (history.pushState) {
                history.pushState(null, null, hash); 
            } else {
                window.location.hash = hash;
            } 
        });
        return false;    
    } // End if
});

event.preventDefault();, кажется, проблема, поэтому он был удален. return false; было добавлено.

Также в качестве бонуса приведен код, позволяющий плавно прокручиваться со смещением для привязки ссылок с внешних страниц:

$(window).on("load", function () {

    var urlHash = window.location.href.split("#")[1];

    if (urlHash &&  $('#' + urlHash).length) {

        $('html,body').animate({
            scrollTop: $('#' + urlHash).offset().top - 70
        }, 800);
    }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...