Question

我创建了一个不错的小javascript菜单，故意不使用数据标签，因为我发布了html净化器冲突（另一个很长的故事）。

无论如何，经过多次修补后，功能和样式的工作方式完全符合我的要求，但有一个例外 - 当我点击每个菜单项时，它会在屏幕上的不同位置打开内容，似乎取决于内容。我希望它始终在顶部打开，以便菜单始终可见，以及内容的顶部，然后您可以根据需要向下滚动。

我一直在尝试解决这个问题，所以会感谢任何帮助，或修改附带的小提琴。

提前致谢

保罗

$(document).ready(function () {
var lastItem = null;
$('#listingmenu').on('click', 'a', function () {
    newItem = this.getAttribute('href').substring(1);
    if (newItem != lastItem) {
            $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox:visible').hide(600);
        // fade in new selected subcontent
        $('#' + newItem).show(600);
        lastItem = newItem;
    }
}).find('a:first').click();

}）;

Answer 1

问题是引用仍然会转到相应的ID位置。我添加了一行jquery，它会在点击后将页面滚动回顶部。这是添加的行：

$("html, body").animate({ scrollTop: 0 }, 1);

这是你的jsfiddle这一行：

https://jsfiddle.net/awcguxs5/2/

如果您正在寻找，请告诉我们！：）

Answer 2

这恰好是因为你不想使用＆＃34;数据标签＆＃34;。

将此添加到onclick块：

$('#listingmenu').on('click', 'a', function (e) {
    e.preventDefault();
    .... //rest of your code.

e.preventDefault()将停止a-href的默认操作，在您的情况下使用#div1个锚点跳转到div。

您在此更新的小提琴： https://jsfiddle.net/awcguxs5/3/

Answer 3

$(document).ready(function () {
var lastItem = null;
$('#listingmenu').on('click', 'a', function () {
    newItem = this.getAttribute('href').substring(1);
    if (newItem != lastItem) {
        $('.current').not($(this).closest('li').addClass('current')).removeClass('current');
        // fade out all open subcontents
        $('.pbox').hide( 600);
        // fade in new selected subcontent
        setTimeout( function(){$('#' + newItem).show(600)} , 600 );
        lastItem = newItem;
    }
}).find('a:first').click();

}）;

settimeout修复了这个问题并给出了-i思考 - 比同时触发隐藏和节目更好的效果。

Javascript菜单 - 滚动/内容跳转

3 个答案: