我有一个功能设置,当你点击.section-down-arrow-wrap时它将遍历祖先并找到最接近的.fullscreen元素,想法是当你点击它时它会将.section元素向下滚动到下一个.fullscreen的实例,你可以看到这个小提琴:
https://jsfiddle.net/neal_fletcher/d9zbw1k2/它没有按预期工作,有些滚动到下一个,有些没有,有些向上滚动你.我还需要一种方法,它可以在树上找到全屏,因为它不一定是section-down-arrow-wrap的祖父元素.这是标记:
HTML:
HTML:
<div class="section"> <div class="fullscreen"> <span> <div class="section-down-arrow-wrap scroller">CLICK</div> </span> </div> <div class="fullscreen"> <div class="half-screen"> <div class="section-down-arrow-wrap scroller">CLICK</div> </div> </div> <div class="fullscreen"> <span> <div class="section-down-arrow-wrap scroller">CLICK</div> </span> </div> <div class="fullscreen"> <div class="half-screen"> <div class="section-down-arrow-wrap scroller">CLICK</div> </div> </div> </div>
jQuery的:
$(document).ready(function () { $('.section-down-arrow-wrap.scroller').on('click',function () { var fuller = $(this).closest('.fullscreen').next('.fullscreen'),section = $(this).closest('.section'); section.animate({ scrollTop: fuller.offset().top + 0 },700); }); });
任何建议将不胜感激!
解决方法
您必须在计算
.scrollTop()
中包括滚动的当前垂直位置
$('.scroller').click(function(){ var fuller = $(this).closest('.fullscreen').next(),section = $(this).closest('.section'); section.animate({ scrollTop: section.scrollTop() + fuller.offset().top },700); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。