Question

我在页面上有两个脚本，但scroll.js阻止main.js工作。我不是脚本专家所以不知道我需要更改/添加什么才能让他们都工作。

感谢任何帮助。

它们如下所示出现在页面上：

<script src="assets/js/scroll.js"></script>
<script src="assets/js/main.js"></script>

scroll.js包含：

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

main.js包含：

(function($) {

skel
    .breakpoints({
        xlarge: '(max-width: 1680px)',
        large: '(max-width: 1280px)',
        medium: '(max-width: 980px)',
        small: '(max-width: 736px)',
        xsmall: '(max-width: 480px)'
    });

$(function() {

    var $window = $(window),
        $body = $('body');

    // Disable animations/transitions until the page has loaded.
        $body.addClass('is-loading');

        $window.on('load', function() {
            window.setTimeout(function() {
                $body.removeClass('is-loading');
            }, 100);
        });

    // Fix: Placeholder polyfill.
        $('form').placeholder();

    // Prioritize "important" elements on medium.
        skel.on('+medium -medium', function() {
            $.prioritize(
                '.important\\28 medium\\29',
                skel.breakpoint('medium').active
            );
        });

    // Nav.
        $('#nav')
            .append('<a href="#nav" class="close"></a>')
            .appendTo($body)
            .panel({
                delay: 500,
                hideOnClick: true,
                hideOnSwipe: true,
                resetScroll: true,
                resetForms: true,
                side: 'right'
            });

});

})(jQuery);

请注意，在这两个脚本之上还有两个被引用的脚本：skel.min.js和util.js.

scroll.js只允许平滑向下滚动到页面锚点。 main.js允许弹出菜单出现。

每个作品的功能都是自己的，但是scroll.js会阻止main.js中的菜单工作。

我不一定要使用那个精确的滚动脚本，只是想要与main.js一起工作的东西。

Answer 1

将脚本“scroll.js”替换为：

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

Answer 2

我从此页面获取了平滑滚动脚本：Smooth scrolling when clicking an anchor link

然而，我将我的scroll.js更新为第二个答案，其中包括：

 $('a[href*=#]').on('click', function(event){     
     event.preventDefault();
     $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
 });

适用于我的main.js脚本。

一个脚本阻止第二个脚本工作

2 个答案: