Question

我有一个div，里面有多个div，用户可以滚动它。它是切换 - 单击按钮显示/隐藏。

HTML：

<div id="mainDiv">
    <div class="innerDiv" id="one"></div>
    <div class="innerDiv" id="two"></div>
    <div class="innerDiv" id="three"></div>
    <div class="innerDiv" id="four"></div>
    <div class="innerDiv" id="five"></div>
    <div class="innerDiv" id="six"></div>
    <div class="innerDiv" id="seven"></div>
    <div class="innerDiv" id="eight"></div>
    <div class="innerDiv" id="nine"></div>
    <div class="innerDiv" id="ten"></div>
</div>

<a href="javascript:void(0)" id="opnLnk">Open Popup</a>
<a href="javascript:void(0)" id="clsLnk">Close Popup</a>

CSS：

#mainDiv {width:300px; height:350px; border:1px solid #000; background-color:palegreen; overflow-x:hidden; overflow-y:auto}
.innerDiv {width:298px; border:1px solid green; height:50px}
#three {background-color:red}
.innerDiv:nth-child(odd) {background-color:green}
.innerDiv:nth-child(even) {background-color:blue}
#opnLnk, #clsLnk {right:30px; right:30px; position:absolute}
#opnLnk {top:30px}
#clsLnk {top:70px}

JS：

$("#opnLnk").click(function(){
    // need a script to always show red div
    $("#mainDiv").show();
});

$("#clsLnk").click(function(){
    $("#mainDiv").hide();
});

小提琴： http://jsfiddle.net/PSSdC/

当用户滚动到底部时，他会关闭弹出窗口并再次打开。我想要的是在弹出窗口始终打开时始终在顶行显示红色（#three）div

我已经尝试过jquery scrollTop方法，但由于我在其中加载了ajax内容，我需要一些解决方法。

Answer 1

为你的js添加一个函数scrollToElement



function scrollToElement(ele) {
$("#mainDiv").scrollTop(ele.offset().top).scrollLeft(ele.offset().left);
}

function scrollToElement(ele) { $("#mainDiv").scrollTop(ele.offset().top).scrollLeft(ele.offset().left); }
工作小提琴： http://jsfiddle.net/PSSdC/4/

Answer 2

在任何切换完成事件后，您必须将div滚动到顶部。

$("#clkLnk").click(function(){
    // need a script to always show red div
    $("#mainDiv").toggle("slow",function(){
         $("#mainDiv").scrollTop(0);
    });
});

工作实例：
jsFiddle

打开可滚动的父div时，始终显示子div

2 个答案: