[英]Keeping the page vertically fixed on an element, when lots of content is revealed above (so causing scroll)
I have a long page with lots of data tables of hidden content.我有一个很长的页面,里面有很多隐藏内容的数据表。
They are hidden as they are quite repetitive so not all users want to have to scroll past them all the time.它们被隐藏,因为它们非常重复,因此并非所有用户都希望一直滚动过去。
Frequently down the page there is the option to click to open up all of the hidden data tables.通常在页面下方,可以选择单击以打开所有隐藏的数据表。
The problem is, if you go half way down the page and click to open up the tables, all of the content being revealed above the current view causes the page to scroll down, meaning the user becomes disorientated as to where they are on the page.问题是,如果你走到页面的一半并点击打开表格,当前视图上方显示的所有内容都会导致页面向下滚动,这意味着用户会迷失在页面上的位置.
I've mocked up the problem here.我在这里模拟了这个问题。 If you scroll down to one of the "show more" links nearer the bottom of the page you'll see what i mean.
如果您向下滚动到靠近页面底部的“显示更多”链接之一,您就会明白我的意思。 http://jsfiddle.net/LnubwdzL/
http://jsfiddle.net/LnubwdzL/
I want the clicked link to remain static under the cursor so that the user knows where they are.我希望点击的链接在光标下保持静态,以便用户知道他们在哪里。
This kind of a solution:这种解决方案:
$("a").on('click', function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 2000);
});
... from other questions on SO, doesn't seem to cut it. ...从关于SO的其他问题来看,似乎并没有削减它。 Even if it ends up in the right place the page still moves about a lot before coming to rest.
即使它最终出现在正确的位置,页面在停止之前仍然会移动很多。
If I understand it correctly and as I mentioned in comments, I think you can set the same duration
value to both your slideDown();
如果我理解正确并且正如我在评论中提到的那样,我认为您可以为
slideDown();
设置相同的duration
值slideDown();
and your animate()
functions, and have them both inside the same click
handler.和您的
animate()
函数,并将它们都放在同一个click
处理程序中。
Your code may then become:你的代码可能会变成:
$('a').on('click', function(e){
e.preventDefault();
if($('.hide').length>0){$('html, body').animate({scrollTop:$(this).offset().top},400);}
$('.hide').hide().removeClass('hide').slideDown(400);
});
Hope this helps.希望这可以帮助。
Update #1: Added a check on top of animate()
so it does not animate when there is no $('.hide')
element present anymore.更新 #1:在
animate()
之上添加了一个检查,因此当不再存在$('.hide')
元素时它不会动画。
Update #2: Take a look at this resulting fiddle of another experiment.更新 #2:看看另一个实验的结果小提琴。 Let me know if this was what you were looking for.
让我知道这是否是您要找的。
The way this works is:它的工作方式是:
anchor
, offset().top
of clicked element is first stored in a variable named prevOffset
.anchor
,被单击元素的offset().top
首先存储在名为prevOffset
的变量中。$(window).scrollTop()
value is also stored in a variable named scrollTop
.$(window).scrollTop()
值也存储在名为scrollTop
的变量中。.hide
elements are temporarily made visible via $('.hide').show();
.hide
元素通过$('.hide').show();
暂时可见$('.hide').show();
. offset().top
of the same clicked element is then stored in a variable named currOffset
.offset().top
然后存储在一个名为currOffset
的变量中。.hide
elements are made invisible again via $('.hide').hide();
.hide
元素都通过$('.hide').hide();
再次不可见$('.hide').hide();
. scrollTop
is then animated to a value calculated as: scrollTop+(currOffset-prevOffset)
.scrollTop
动画化为一个计算值: scrollTop+(currOffset-prevOffset)
。$('.hide')
elements are animated via slideDown()
.$('.hide')
元素都通过slideDown()
进行动画slideDown()
。 JavaScript: JavaScript:
var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
e.preventDefault();
hideElements=$('.hide');
if(hideElements.length>0){
scrollTop=$(window).scrollTop();
prevOffset=$(this).offset().top;
hideElements.show();
currOffset=$(this).offset().top;
hideElements.hide();
$('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
hideElements.removeClass('hide').slideDown(duration);
}
});
Hope this is what you were looking for.希望这就是你要找的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.