【优化】页面切换时记录菜单栏滚动条位置

[dkvirus]

描述

每次从左边的菜单点击章节跳转之后，左边的菜单栏会自动跳转到顶部去，希望可以优化成下一个页面会记录上一次菜单的滚动条位置。

方案

部署到 web 服务器上的都是一个个 html 页面，每次点击菜单栏切换页面，页面都会重新加载，导致菜单栏滚动条会复位到最初位置。

监听菜单栏滚动事件，将滚动条的位置记录到 localStorage 中，当页面切换时，优先从 localStorage 中拿滚动条位置值，通过 scrollTop() 设置滚动条的位置。

[dkvirus]

@lisniuse 已修复。参见 commit 10adfd0a7215da，请复核。

[lisniuse]

发现bug，点击三角箭头无法收起，而且左边菜单闪烁严重。

[dkvirus]

sorry，这是我代码的问题。我监听了菜单栏所有 a 标签的点击事件，并且阻止了默认行为，导致菜单无法收缩。

左侧菜单的父级菜单本身也可以拥有链接，自身拥有链接的父级菜单无法折叠，没有链接的父级菜单才可以折叠。（numpy中文网是这么整的）

需求是页面切换左边菜单栏保持位置不变，光靠记录滚动条貌似无法实现这一点。切换页面时，原本已折叠的页面又会自动展开。

先把监听菜单滚动条那部分代码删掉吧。就只有 main.js 最后两个监听函数。

$('.tea-menu').find('a').on('click', function (e) {
        e.preventDefault()
        const scrollTop = $('.tea-menu').scrollTop()
        localStorage.setItem('menuScrollTop', scrollTop)
        const url = e.currentTarget.href
        window.location.href = url
    })

    $('.tea-menu').ready(function(){
        scrollTop = localStorage.getItem('menuScrollTop') || 0
        $('.tea-menu').animate({ scrollTop: scrollTop }, 500)
    });

[dkvirus]

@lisniuse 可以考虑做成局部刷新，这样左边菜单栏就可以记住状态了。

• 布局页面，包含左侧菜单栏等每个页面都会有的元素；
• dev 和 build，目前生成的所有文档的 html 文件都包含了左侧菜单栏的代码，可以修改成只包含 marked 生成的文档自身 html 代码；
• 点击菜单，ajax 请求对应的 html 文件。在同一台服务器上请求，不存在跨域问题。响应类型为 text/html。再使用 $('.markdown-body').html('菜单对应文档的 html 代码') 局部刷新页面。

不知道有没有说明白，语言表达的太匮乏了~~

[lisniuse]

如果不好实现的话，先舍弃这个功能。