[英]scroll to next div by js
我知道有很多相同的例子,但他们的代码不起作用。 请帮忙。 所以我在容器块的底部有箭头图像? 容器的内容是弹性的(如果知道重要的话,。)当我点击箭头时,它应该向下移动到下一个容器。
$("#arrow").click(function() { var $target = $('.container.active').next('.container'); if ($target.length == 0) $target = $('.container:first'); $('html, body').animate({ scrollTop: $target.offset().top }, 'slow'); $('.active').removeClass('active'); $target.addClass('active'); });
.container { height: 100%; margin: 0px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container first active" id="first"> ///not important content <button class="next"> <img src="arrow.png" id="arrow" alt="down">click </button> </div> <div class="container second" id="second"> <div class="arrow"> <img src="arrowup.png" alt="up"> </div> <div class="arrow"> <img src="arrow.png" alt="arrow"> </div> </div>
https://jsfiddle.net/w7duthsa/试试这个。 你应该小心箭头事件触发的地方。 它在图标中。 你必须点击图标才能运行。 按钮不下来。
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
如果你想放弃按钮,然后给按钮箭头 id 并使用 https ://jsfiddle.net/w7duthsa/1/ 下面的 function
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});
您可以简单地使用锚标记并传递您想要关注的 div 的 id。 下面是一个例子。
.container { height: 100%; margin: 0px; }.second, .first{ border: 1px solid black; height: 500px; width:100% }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container first active" id="first"> <.-- not important content --> <a href="#second"> <img src="arrow.png" id="arrow" alt="down">click </a> </div> <div class="container second" id="second"> <a class="arrow" href="#first"> <img src="arrowup.png" alt="up"> </a> <div class="arrow"> <img src="arrow.png" alt="arrow"> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.