Question

我有一个html网页。它包含很长的文本段落。用户可以使用互联网浏览器阅读该段落。由于通道很长，用户需要滚动页面才能阅读整个段落。我想添加一个浮动框按钮供用户点击。单击按钮后，我可以捕获通道的当前查看部分。这样用户可以稍后登录并继续阅读。

我想我需要添加一些javascript，但经过数小时的在线搜索后，我找不到相关信息。请建议可行的解决方案吗？

Answer 1

基本理念是......

在页面上创建一个浮动书签按钮，如：

#mybookmark{
position: fixed;
top:30px;
right:0;
}

现在在jquery ..点击它时检索这个浮动书签的位置..

$('#mybookmark').click(function(){
    var bookmark_loc = $('#mybookmark').offset().top();
});

将此bookmark_loc数据存储在用户的首选存储空间中。

然后当他们点击按钮时，您可以滚动到存储中存储的偏移值..在jquery中

$('#scroll_to_bookmark').click(function{
var bookmark_loc = //Fetch bookmark
$('body').animate({ scrollTop: bookmark_loc; });
});

Answer 2

使用position:fixed框/按钮。单击它可以存储（或更新，如果已存在）具有当前位置的localStorage项目或cookie。在页面加载时，如果该项目存在，请询问用户是否要返回该位置。

有两种方法可以做到这一点：

将位置保存为像素值。如果用户的显示器不会改变大小（切换计算机，切换监视器，更改屏幕分辨率设置等），这将完美地工作。但是，如果确实发生了任何这些更改，则保存位置的绝对像素值与页面上的位置不一致。

Demo。要运行：单击“保存位置”，在任意位置滚动，然后重新加载页面。
将位置保存为总高度的百分比。这与解决方案（1）完全相同，但处理屏幕大小也发生变化的所有情况。（使用此代码。）下面提供的代码与此解决方案有关。

Demo。要运行：点击“保存位置”;改变“结果”象限的宽度;在不更改任何代码的情况下，再次单击“运行”。

无论用户选择什么（无论是否返回到最后一个位置），都会删除保存的项目，以便每次重新加载页面时都不会显示提示（这可能会让人讨厌）。

这是纯粹的JS;它非常模块化;它演示了localStorage的简单用法，并优雅地回退到cookie。

<强> HTML

<div id="save">
    <button id="saveButton">Save position</button>
    <span id="saved">Saved!</span>
</div>
<div id="content">
    <!-- Disgustingly long content -->
</div>

<强> CSS

#save {
    position:fixed;
    top:30px;
    left:10px;
    width:20%;
}
#saved {
    visibility:hidden;
    color:green;
}
#content {
    width:60%;
    margin:auto;
}

<强> JS

function checkStorageSupport() {
    var test = "test";
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

function getTotalHeight() {
    return document.body.clientHeight;
}

function getSavedPercent() {
    var percent = storageSupported ? loadFromStorage() : loadFromCookie();
    return (percent == null || percent == "") ? 0 : percent;
}


/******* Save *******/

function saveInStorage() {
    localStorage.setItem("scrollPercent", (document.documentElement.scrollTop / getTotalHeight()));
}

function saveCookie() {
    var expDate = new Date();
    expDate.setDate(expDate.getDate() + 7); // start over if it's been more than ___ days
    document.cookie = "scrollPercent=" + (document.documentElement.scrollTop / getTotalHeight())
                + "; " + expDate;         
}


/******* Load *******/

function loadFromStorage() {
    return localStorage.getItem("scrollPercent");
}

function loadFromCookie() {
    return document.cookie.replace(/(?:(?:^|.*;\s*)scrollPercent\s*\=\s*([^;]*).*$)|^.*$/, "$1");
}


/******* Remove *******/

function removeFromStorage() {
    localStorage.removeItem("scrollPercent");
}

function removeCookie() {
    document.cookie = "scrollPercent=''";
}


/******* Handler *******/

var saveButton = document.getElementById("saveButton"),
    saved = document.getElementById("saved");

saveButton.onclick = function() {
    storageSupported ? saveInStorage() : saveCookie();
    saved.style.visibility = "visible";
    setTimeout(function() {
        saved.style.visibility = "hidden";
    }, 1500);
};


/******* Logic *******/

var storageSupported = checkStorageSupport(),
    percent = getSavedPercent();

if (percent > 0) {
    if (confirm("Would you like to continue reading where you left off?")) {
        document.documentElement.scrollTop = percent * getTotalHeight();
    }
    storageSupported ? removeFromStorage() : removeCookie();
}

注意：要返回生成解决方案（1）的代码，请复制该演示中的代码。在JSFiddle发生故障的情况下，这里有手动指令：

在“保存”功能中删除/ getTotalHeight()的每个实例
在“逻辑”部分中，将position * getTotalHeight()替换为position
删除getTotalHeight()，因为它未使用
将“percent”的实例替换为“position”以使语义更准确

HTML javascript书签用户查看位置

2 个答案: