0

我有一个 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 内容，所以我需要一些解决方法。

4

2 回答 2

1

scrollToElement在你的 js 中添加一个函数。

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


工作小提琴：http: //jsfiddle.net/PSSdC/4/

于 2013-09-16T12:21:52.243 回答
0

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

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

工作示例：
jsFiddle

于 2013-09-16T12:15:19.693 回答