demoncoder demoncoder - 3 months ago 9
CSS Question

jquery go to top of div or page after show and hide div

I have div A with LINK at the bottom (above with many content).
After click the LINK to hide div A and show div B (I use fade in fade out),
the div B not showing/fade in from the beginning of the content, but in the middle where I click for the link.
What can I do to make the it show top of the div or page?

https://jsfiddle.net/5zqcp6gn/



$('.click').click(function() {
$(".a").fadeOut("slow", function() {
$(".b").fadeIn("slow");
});
});

.b {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="a">a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> a<br> </div>

<div class="b">b<br> b<br> b<br> b<br> b<br> b<br> b<br> b<br> b<br> b<br> b<br> b<br>
</div>

<a href="javascript:void(0)" class="click">Click</a>




Answer

It's because you haven't enabled the jQuery framework in the settings for your fiddle.

enter image description here

Also you need to change this line:

<a href="javascript:void(0)" class="click">Click</a>

to

<a href="#" class="click">Click</a>

https://jsfiddle.net/yz7p73nh/9/