Javascript 如何阻止此滑入菜单滚动到网页顶部？

在我正在开发的这个页面上，如果你向下滚动，标题会折叠。要在页眉压缩时访问导航菜单，请按左上角的“汉堡”图标：

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

当“滑入”菜单被激活时，我想停止页面滚动到顶部，但我不知道该怎么做。我正在使用jQuery，我读到如果我实现命令

e.preventDefault（）

，那么它可能会阻止页面滚动，但我不确定在哪里实现该命令。如果我将其直接放在

href

元素中，则它不起作用，如下所示：

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

这是上面引用的

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

---

谢谢您的帮助。

您使用

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

---

希望这能回答您的问题。

您使用

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

---

希望这能回答您的问题。

我尝试单击那个汉堡图标，但它并没有将我推到移动视图的顶部。.问题只出现在桌面版本中。有多个引用到

classie

。它是在哪里定义的？我没有太多的权限访问您的代码，但尝试删除$（'nav toggler'）.css（'display'，'block'）；这个css样式来自header.js，还有$（'nav-toggler'）.css（'display'，''）。。。我只是替普洛斯特说。只要测试一次，让我知道什么happen@JonStødle，对不起，我应该也包括

classie.js

文件。现在有问题了。@Leothelion，是的，看来你是对的。你知道为什么这种效果可以在移动设备上正常工作，而不是在桌面浏览器上吗？我希望确保两者的行为相同。我尝试单击汉堡图标，但它没有将我推到移动视图的顶部。问题仅出现在桌面版本中。有多个引用到

classie

。它是在哪里定义的？我没有太多的权限访问您的代码，但尝试删除$（'nav toggler'）.css（'display'，'block'）；这个css样式来自header.js，还有$（'nav-toggler'）.css（'display'，''）。。。我只是替普洛斯特说。只要测试一次，让我知道什么happen@JonStødle，对不起，我应该也包括

classie.js

文件。现在有问题了。@Leothelion，是的，看来你是对的。你知道为什么这种效果可以在移动设备上正常工作，而不是在桌面浏览器上吗？我想确保两者的行为是相同的。