Question

我对jQuery了解不多，但我一直在使用以下javascript代码来制作一个表格，以便在页面返回时保持滚动条的位置：

<script type="text/javascript">
    window.onload = function () {
        var strCook = document.cookie;
        if (strCook.indexOf("!~") != 0) {
            var intS = strCook.indexOf("!~");
            var intE = strCook.indexOf("~!");
            var strPos = strCook.substring(intS + 2, intE);
            document.getElementById("grdWithScroll").scrollTop = strPos;
        }
    }
    function SetDivPosition() {
        var intY = document.getElementById("grdWithScroll").scrollTop;
        document.cookie = "yPos=!~" + intY + "~!";
    }
</script>

和

<div id="grdWithScroll" onscroll="SetDivPosition()">

它适用于单个div。但是我怎么能扩展它以用于第二个div部分呢？

Answer 1

您可以将相同的类名称设置为您想要此功能的所有div，而不是使用document.getElementById，然后使用jQuery选择器$（“。scrollgrid”）来选择多个div，并存储滚动顶部。如果您不想使用jQuery，可以查看人们编写的自定义函数，以按类名选择元素。这是一个例子。

http://www.netlobo.com/javascript_getelementsbyclassname.html

Answer 2

您可以使用class属性来定义您希望使用该功能的所有div，而不是单个div id。

<div id="grdWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>
<div id="abcWithScroll" class="coolScroll" onscroll="SetDivPosition()">
</div>

使用jQuery（或其他库）轻松选择具有所述类的所有div并访问scrollTop属性

$('.coolScroll').each( function()
{
// do something with scrollTop
}

您也可以使用类选择器来设置onscroll函数。

$('.coolScroll').attr( 'onscroll' , 'javascript:SetDivPosition()' );

Answer 3

找到我在这里寻找的东西：

http://social.msdn.microsoft.com/Forums/nb-NO/jscript/thread/ad18ed20-8ae2-4c13-9a51-dcb0b1397349

<script language="javascript" type="text/javascript">

//This function sets the scroll position of div to cookie.
function setScrollPos() {
    var div1Y = document.getElementById('div1').scrollTop;
    var div2Y = document.getElementById('div2').scrollTop;
    document.cookie = "div1Pos=!*" + div1Y + "*!" + 
    " div2Pos=|*" + div2Y + "*|";
}

///Attaching a function on window.onload event.
window.onload = function () {
    var strCook = document.cookie; if (strCook.indexOf("!~") != 0) {
        var intS = strCook.indexOf("!~");
        var intE = strCook.indexOf("~!"); 
        var strPos = strCook.substring(intS + 2, intE);
        document.body.scrollTop = strPos;
    }

    /// This condition will set scroll position of <div> 1.
    if (strCook.indexOf("iv1Pos=!*") != 0) {
        var intdS = strCook.indexOf("iv1Pos=!*");

        var intdE = strCook.indexOf("*!");
        var strdPos = strCook.substring(intdS + 9, intdE);
        document.getElementById('div1').scrollTop = strdPos;
    }

    /// This condition will set scroll position of <div> 2.
    if (strCook.indexOf("iv2Pos=!*") != 0) {
        var intdS = strCook.indexOf("iv2Pos=|*");
        var intdE = strCook.indexOf("*|");
        var strdPos2 = strCook.substring(intdS + 9, intdE);
        document.getElementById('div2').scrollTop = strdPos2;
    }
}

</script>

在多个部分使用一个javascript代码

3 个答案: