javascript - 如何阻止菜单中的此幻灯片滚动到网页顶部？

Question

关于this website我正在开发，如果向下滚动，标题就会折叠。要在标题压缩时访问导航菜单，请按左上角的“汉堡包”图标:

导航菜单按其应有的方式滑入，但我遇到的一个问题是单击该图标也会将页面返回到顶部，这不是所需的行为:

我想在激活滑入式菜单时停止页面滚动到顶部，但我不知道该怎么做。我正在使用 jQuery，并且我读到，如果我实现命令 e.preventDefault() 那么它可能会阻止页面滚动，但我不确定在哪里实现该命令。如果我像这样将其直接放入 href 元素中，则不起作用:

<a href="#" onclick="e.preventDefault();" class="nav-toggler toggle-push-left fa fa-bars"></a>

不过，解决方案不必涉及 jQuery。我对任何方法都持开放态度。 如何让侧边菜单滑入但不让页面返回顶部？

这是驱动菜单的 Javascript，这是我在网上找到的，所以我不一定理解所有内容:

(function( window ){

    'use strict';

    var body = document.body,
        mask = document.createElement("div"),
        togglePushLeft = document.querySelector( ".toggle-push-left" ),
//      pushMenuLeft = document.querySelector( ".push-menu-left" ),
        activeNav
    ;
    mask.className = "mask";

    /* push menu left */
    togglePushLeft.addEventListener( "click", function(){
        classie.add( body, "pml-open" );
        document.body.appendChild(mask);
        activeNav = "pml-open";
    } );

    /* hide active menu if mask is clicked */
    mask.addEventListener( "click", function(){
        classie.remove( body, activeNav );
        activeNav = "";
        document.body.removeChild(mask);
    } );

    /* hide active menu if close menu button is clicked */
    [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
        el.addEventListener( "click", function(){
            classie.remove( body, activeNav );
            activeNav = "";
            document.body.removeChild(mask);
        } );
    });

    document.addEventListener( "keyup", function(e) {
        if ( parseInt(e.keyCode) === 27 && classie.has( body, activeNav ) ) {
            classie.remove( body, activeNav );
            document.body.removeChild(mask);
        }
    });

})( window );

这是上面引用的classie.js:

( function( window ) {

'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

function classReg( className ) {
  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;

if ( 'classList' in document.documentElement ) {
  hasClass = function( elem, c ) {
    return elem.classList.contains( c );
  };
  addClass = function( elem, c ) {
    elem.classList.add( c );
  };
  removeClass = function( elem, c ) {
    elem.classList.remove( c );
  };
}
else {
  hasClass = function( elem, c ) {
    return classReg( c ).test( elem.className );
  };
  addClass = function( elem, c ) {
    if ( !hasClass( elem, c ) ) {
      elem.className = elem.className + ' ' + c;
    }
  };
  removeClass = function( elem, c ) {
    elem.className = elem.className.replace( classReg( c ), ' ' );
  };
}

function toggleClass( elem, c ) {
  var fn = hasClass( elem, c ) ? removeClass : addClass;
  fn( elem, c );
}

var classie = {
  // full names
  hasClass: hasClass,
  addClass: addClass,
  removeClass: removeClass,
  toggleClass: toggleClass,
  // short names
  has: hasClass,
  add: addClass,
  remove: removeClass,
  toggle: toggleClass
};

// transport
if ( typeof define === 'function' && define.amd ) {
  // AMD
  define( classie );
} else if ( typeof exports === 'object' ) {
  // CommonJS
  module.exports = classie;
} else {
  // browser global
  window.classie = classie;
}

})( window );

感谢您的帮助。

Answer 1

您使用e.preventDefault()的想法是可行的，但您不能像onclick="e.preventDefault();"那样内联使用它。 e 实际上是事件触发时触发的事件对象，因此正确的语法是:

$("selector").addEventListener("click", function(e){
  e.preventDefault();
});

由于汉堡链接包含 href="#"，点击它就会移到顶部。因此，我们使用 preventDefault() 来停止(或“阻止”)它。

将代码替换为:

(function( window ){

    'use strict';

    var body = document.body,
        mask = document.createElement("div"),
        togglePushLeft = document.querySelector( ".toggle-push-left" ),
//      pushMenuLeft = document.querySelector( ".push-menu-left" ),
        activeNav
    ;
    mask.className = "mask";

    /* push menu left */
    togglePushLeft.addEventListener( "click", function(e){
        e.preventDefault();
        classie.add( body, "pml-open" );
        document.body.appendChild(mask);
        activeNav = "pml-open";
    } );

    /* hide active menu if mask is clicked */
    mask.addEventListener( "click", function(e){
        e.preventDefault();
        classie.remove( body, activeNav );
        activeNav = "";
        document.body.removeChild(mask);
    } );

    /* hide active menu if close menu button is clicked */
    [].slice.call(document.querySelectorAll(".close-menu")).forEach(function(el,i){
        el.addEventListener( "click", function(e){
            e.preventDefault();
            classie.remove( body, activeNav );
            activeNav = "";
            document.body.removeChild(mask);
        } );
    });

    document.addEventListener( "keyup", function(e) {
        if ( parseInt(e.keyCode) === 27 && classie.has( body, activeNav ) ) {
            classie.remove( body, activeNav );
            document.body.removeChild(mask);
        }
    });

})( window );

希望能回答您的问题。