[英]Overflow: auto on html,body breaks jQuery .animate scroll to top?
I have a button at the bottom of my webpage that when clicked scrolls back to the top of the page. 我在网页底部有一个按钮,单击该按钮可滚动回到页面顶部。 This works perfectly and can be seen in my demo here .
这非常有效,可以在我的演示中看到 。
I had another issue with a drawer in my site where the entire page kept jumping up when the drawer was opened - to solve this i needed to apply overflow:auto;
我的网站上还有一个抽屉问题,当抽屉打开时,整个页面一直在跳动-为了解决这个问题,我需要应用
overflow:auto;
to the html,body
and that fixed the issue. 到
html,body
并解决了这个问题。
However in the process it stopped my back to top button from working. 但是,在此过程中,我的后退按钮停止工作。 I wondered if anyone might be able to explain why or if there is an easy solution to this, I just can't figure it out?
我想知道是否有人可以解释原因,或者是否有简单的解决方案,我只是想不通?
To see my issue simply uncomment the overflow:auto
in my demo CSS. 要查看我的问题,只需在演示CSS中取消注释
overflow:auto
。
UPDATE UPDATE
Thanks to a few suggestions below applying overflow:auto
just to the body
NOT html
fixes the issue on everything except desktop Safari - anyone got any clue how to remedy this? 多亏了以下一些将
overflow:auto
应用于body
建议,但html
不能解决除桌面Safari之外的所有问题-有人知道如何解决此问题吗?
var offset = 300,
scroll_top_duration = 700,
$back_to_top = $('.top');
// Smooth scroll to top
$back_to_top.on('click', function(event) {
event.preventDefault();
$('body,html').animate({
scrollTop: 0,
}, scroll_top_duration
);
});
It seems that it doesn't like having overflow on the html element. 似乎不喜欢在html元素上溢出。 Here's a fiddle: http://jsfiddle.net/330zyny7/2/
这是一个小提琴: http : //jsfiddle.net/330zyny7/2/
Moving the overflow to the body fixed it. 将溢流移至阀体固定。
var offset = 300, scroll_top_duration = 700, $back_to_top = $('.top'); // Smooth scroll to top $back_to_top.on('click', function(event) { event.preventDefault(); alert(); $('body,html').animate( {scrollTop: 0, }, scroll_top_duration ); });
html, body { padding: 0; margin: 0; height: 100%; -webkit-overflow-scrolling: touch; } body{ overflow:auto; } .page-wrapper { position: relative; height: 1000px; } h3 { position: absolute; bottom: 0; }
<div class="page-wrapper"> <p>Top - scroll to the bottom to click 'back to top'</p> <h3> <a href="#" class="top">Back to top</a> </h3> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.