Как использовать Scrollspy, когда у меня есть ссылки на странице и за ее пределами? - PullRequest
0 голосов
/ 14 июня 2019

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

Uncaught Error: Syntax error, unrecognized expression: https://example.com/page2

Могу ли я что-то сказать, чтобы scrollspy игнорировал эту ссылку, илиЕсть ли другой способ избавиться от этой ошибки?Спасибо!

Вот код, который я использую для инициализации scrollspy:

(function ($) {

    'use strict';

    // SmoothLink
    function initSmoothLink() {
        $('.nav-item a').on('click', function(event) {
            var $anchor = $(this);
            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top - 0
            }, 1500, 'easeInOutExpo');
            event.preventDefault();
        });
    }

    // StickyMenu
    function initStickyMenu() {
        $(window).on('scroll',function() {
            var scroll = $(window).scrollTop();

            if (scroll >= 50) {
                $(".sticky").addClass("stickyadd");
            } else {
                $(".sticky").removeClass("stickyadd");
            }
        });
    }

    // Scrollspy
    function initScrollspy() {
        $("#navbarCollapse").scrollspy({
            offset: 70
        });
    }

    //MFPVideo
    function initMFPVideo() {
        $('.video_play').magnificPopup({
            disableOn: 700,
            type: 'iframe',
            mainClass: 'mfp-fade',
            removalDelay: 160,
            preloader: false,
            fixedContentPos: false
        });
    }

    // Back To Top
    function initBackToTop() {
        $(window).on('scroll',function(){
            if ($(this).scrollTop() > 100) {
                $('.back_top').fadeIn();
            } else {
                $('.back_top').fadeOut();
            }
        }); 
        $('.back_top, .footer_logo_link').on('click',function(){
            $("html, body").animate({ scrollTop: 0 }, 1000);
            return false;
        });
    }

    function init() {
        initSmoothLink();
        initStickyMenu();
        initScrollspy();
        initMFPVideo();
        initBackToTop();
    }

    $(document).on('turbolinks:load', function(){
        init();
    });

})(jQuery);

1 Ответ

0 голосов
/ 14 июня 2019

Вы можете добавить оператор if, чтобы проверить, есть ли у href хеш. Если у него его нет, он будет работать как обычно.

function initSmoothLink() {
        $('.nav-item a').on('click', function(event) {
            var $anchor = $(this);
            if (this.hash !== "") {
               $('html, body').stop().animate({
                   scrollTop: $($anchor.attr('href')).offset().top - 0
               }, 1500, 'easeInOutExpo');
               event.preventDefault();
            }
        });
     }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...