Question

所以我做了一个菜单的东西，通过CSS固定位置贴在屏幕的底部，它工作正常。唯一的问题是当页面向下滚动，然后激活菜单（用jQuery向上滑动动画）时，页面再次跳到顶部。这很刺激。这是一些相关的代码：

//handle click on stats tab
$('a.stats').click(function(e) {
    if ($('#menuWrapper').hasClass("stats")) {
        $('#menuWrapper').removeClass("stats")
        .removeClass("open")
        .animate({ bottom: '-100px'}, 300);
    } else if (!$('#menuWrapper').hasClass("open")) {
        $('#sponsors').hide();
        $('#feedback').hide();
        $('#stats').show();
        $('#menuWrapper').animate({ bottom: '0px'}, 300)
        .addClass("stats")
        .addClass("open");
    } else {
        $('#menuWrapper').addClass("stats");
        $('#sponsors').fadeOut();
        $('#feedback').fadeOut();
        $('#stats').fadeIn();
    }
    $('#menuWrapper').removeClass("sponsors")
    .removeClass("feedback");
});

（这是我如何更改内容的一个示例。我有类似的功能，可以根据当前状态更改内容或最小化菜单。）

<div id="menuWrapper">

    <div id="menuTop">
        <a href="#" class="sponsors">Sponsors</a> | <a href="#" class="feedback">Feedback</a> | <a href="#" class="stats">Stats</a>
    </div>

    <div id="menuContent">
        <div id="sponsors"></div>
        <div id="feedback"></div>
        <div id="stats"></div>
    </div>

</div>

（在内容动态加载到赞助商，反馈和统计信息div之前，这就是HTML的样子。）

如有必要，请查看时髦功能的示例，请参阅http://www.crowdsplat.com/alpha。如果您对可能导致此问题和/或我如何解决问题有任何了解，我将非常感激。谢谢你的时间。

Answer 1

尝试从点击功能返回false或使用event.preventDefault()以避免浏览器尝试按照我认为如果您的书签无效而导致跳转到顶部的链接，例如href =“＃”

e.g

$('a.stats').click(function(e) {
    e.preventDefault();
    if ($('#menuWrapper').hasClass("stats")) {
        $('#menuWrapper').removeClass("stats")
        .removeClass("open")
        .animate({ bottom: '-100px'}, 300);
    } else if (!$('#menuWrapper').hasClass("open")) {
        $('#sponsors').hide();
        $('#feedback').hide();
        $('#stats').show();
        $('#menuWrapper').animate({ bottom: '0px'}, 300)
        .addClass("stats")
        .addClass("open");
    } else {
        $('#menuWrapper').addClass("stats");
        $('#sponsors').fadeOut();
        $('#feedback').fadeOut();
        $('#stats').fadeIn();
    }
    $('#menuWrapper').removeClass("sponsors")
    .removeClass("feedback");
});

更改固定元素的内容时不需要的页面滚动

1 个答案: