javascript - 在 Sennajs 中防止点击链接跳转到页面顶部

Question

我是 javascript 的新手，所以如果我问的问题非常明显，请原谅。

我正在使用Sennajs对于我的个人项目。我遇到了类似 gallery example 的问题。当点击链接时，页面会跳转到顶部。我曾经使用 jquery 中的这段代码来修复它。然而，它也会阻止番泻叶工作。

$('a').click(function(e) {
    // do something 
    return false;
    e.preventDefault();
});

任何帮助将不胜感激。

Answer 1

事实证明，你可以使用app.setUpdateScrollPosition(false)避免每次 SennaJS 导航后跳转到页面顶部:

var app = new senna.App();
app.setUpdateScrollPosition(false);

// ...your code here...

<小时/>

旧解决方案(不推荐):

注意:这个解决方案不必要地过于复杂，因为我在了解 app.setUpdateScrollPosition(false) 之前就编写了它。

您可以在导航之前保存当前滚动位置并在导航后滚动到正确的位置，而不是阻止 SennaJS 执行:

var app = new senna.App();

// ...your code here...

function getScrollTop() {

    // Taken from Engineer's answer:
    // https://stackoverflow.com/questions/11193453/find-the-vertical-position-of-scrollbar-without-jquery#11193613
    return (window.pageYOffset !== undefined) ? window.pageYOffset :
        (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

var scrollTop = getScrollTop();

app.on('beforeNavigate', function(event) {
    scrollTop = getScrollTop();
});

app.on('endNavigate', function(event) {
    window.scrollTo(0, scrollTop);
});

有关滚动位置和 JavaScript 的更多信息，请参阅 Engineer的answer here和 MDN's window.scrollTo() documentation .

有关 SennaJS 生命周期事件的更多信息，请参阅 the SennaJS documentation

注意:这可能是 SennaJS 中的一个错误，所以我创建了 a bug report (#184) .