Javascript 菜单 - 滚动/内容跳跃

标签 javascript jquery

我创建了一个漂亮的小 JavaScript 菜单,它故意不使用数据标签,因为我遇到了 html 净化器冲突(另一个长话短说)。

无论如何,经过大量修改,功能和样式完全按照我想要的方式工作,但有一个异常(exception) - 当我单击每个菜单项时,它会在屏幕上的不同位置打开内容,似乎取决于内容的数量内容。我希望它始终在顶部打开,以便菜单以及内容顶部始终可见,然后您可以根据需要向下滚动。

我已经尝试解决这个问题有一段时间了,所以希望得到任何帮助,或者修改所附的 fiddle 。

提前致谢

保罗

https://jsfiddle.net/awcguxs5/

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

});

最佳答案

问题是引用仍然指向相应的 ID 位置。我添加了一行 jquery,单击后会将页面滚动回顶部。这是添加的行:

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

这是您的 jsfiddle 与此行:

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

请告诉我这是否是您正在寻找的内容! :)

关于Javascript 菜单 - 滚动/内容跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32762071/

相关文章:

javascript - 在第一行的第二张图片加载完成后开始加载第二行

javascript - 是否可以将事件移动到日期单元格的底部?

jquery - jQuery 中的正则表达式字段验证

jquery - 三折在线小册子作为网站,如何制作动画?

javascript - 将 AJAX POST 的参数传递给 Grails Controller

jquery - 使用 jQuery 和 CSS 缩放/裁剪图像

javascript - Node.js 回调函数错误参数解释?

javascript - 如何使用 WebStorm 进行 Chrome 扩展开发?

javascript - 用javascript锁定标签键?

javascript - onsubmit 不显示按钮