[英]scroll to next div by js
I know there are lots of same examples, but their code don't work.我知道有很多相同的例子,但他们的代码不起作用。 Please Help.请帮忙。 So I have arrow Image at the bottom of container block?所以我在容器块的底部有箭头图像? The content of container are flex( if it is important to know,.) And when i click on arrow, it should move down by next container.容器的内容是弹性的(如果知道重要的话,。)当我点击箭头时,它应该向下移动到下一个容器。
$("#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/ Try this. https://jsfiddle.net/w7duthsa/试试这个。 U should be careful where arrow event fires.你应该小心箭头事件触发的地方。 It is in icon.它在图标中。 u have to click to icon to run.你必须点击图标才能运行。 Button doesn't down.按钮不下来。
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().parent().next().offset().top);
return false; // prevent anchor
});
If u want to give up down to button then give arrow id to button and use function below https://jsfiddle.net/w7duthsa/1/如果你想放弃按钮,然后给按钮箭头 id 并使用 https ://jsfiddle.net/w7duthsa/1/ 下面的 function
$("#arrow").on("click", function(e) {
$(document).scrollTop($(this).parent().next().offset().top);
return false; // prevent anchor
});
You can simply use anchor tag and pass id of div you want to focus.您可以简单地使用锚标记并传递您想要关注的 div 的 id。 Below is an example for that.下面是一个例子。
.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.