Question

我有一个具有许多部分的登录页面的应用程序，并使用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);

Answer 1

您可以添加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();
            }
        });
     }

Answer 2

Scrollspy在给定容器中查找所有a标签，采用href属性并将其值用作jQuery选择器。这是使用JS的可能解决方案：

<a href="#page2" id="page2" onclick="location.href='https://example.com/page2'">Page 2</a>

如果您不想在href函数中添加其他检查，则需要设置id和initSmoothLink()。

当页面上和页面外都有链接时，如何使用Scrollspy？

2 个答案: