[英]Stop DIV scrolling once it reaches the footer (another DIV)
我有一个“返回顶部”按钮,当用户向下滚动页面时出现。
在一些帮助下,我设法在下面的代码中实现这些功能:向下滚动后在某个点淡入 , 动画滚动到顶部,动画滚动到页面的所有href =“#”链接。
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 800, 'swing', function () {
window.location.hash = target;
});
});
var $win = $(window);
$win.scroll(function () {
if ($win.scrollTop() > 300) {
b.fadeIn();
console.log("fadding in")
}
else {
b.fadeOut();
}
});
});
这是一个有效的例子: http : //jsfiddle.net/q8DUC/8/
我的问题是按钮滚动到页面的页脚...基本上“返回顶部”应该停止在“页脚”DIV上方30px。 但我无法找到实现这一目标的方法。 我环顾四周,但没有发现任何与现有代码相关的东西。
感谢您的任何帮助或建议!
更新:
进一步了解: http : //jsfiddle.net/q8DUC/20/
只是不知道我怎么能避免按钮的跳跃!
有没有办法将按钮固定在底部而不是顶部:0 ???
一如既往地感谢每一个建议或帮助!
我想你可以得到页脚的位置并将其添加到条件中,检查是否应该显示按钮:
// dynamically get the position of the footer
var FOOTER_POSITION = someNumber;
// i THINK something like var FOOTER_POSITION = $('#T4').position().top; could work
if (300 < $win.scrollTop() && $win.scrollTop() < FOOTER_POSITION) {
对不起,我读错了你的问题,因为你使用固定定位按钮你可以实现如下:
#back-top
bottom
属性更改为页脚高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.