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

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 );

希望能回答你的问题。