Peter Solvien Peter Solvien - 1 year ago 96
jQuery Question

ScrollTop to next Section while hiding previous section with animation effect

I am trying to create srollTop effect with 3 main sections full of content. I have 3 sections where the first one is visible and the second and third are display:none. I want to achieve the effect when the first button is clicked to show the second section and hide the first section with animation and then when the second button on the second section is clicked to do the same animation effect hiding second section and showing the third one. Here is example of my code until this moment. I cannot figure out how to do it properly with animation.



$(".button_1").on("click", function() {
$("html, body").animate({
scrollTop: $(".two").offset().top
}, 1000);
$(".two").css({
"display": "block"
});
$(".one").css({
"display": "none"
});
});

body {
height: 3000px;
}

.container {
width: 960px;
margin: 0 auto;
}

.one {
background: red;
width: 100%;
height: 500px;
}

.two {
background: orange;
width: 100%;
height: 500px;
display: none;
}

.three {
background: purple;
width: 100%;
height: 500px;
display: none;
}

.button_1,
.button_2,
.button_3 {
border: 0;
width: 180px;
height: 40px;
background: green;
color: #fff;
display: block;
margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="one">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p>
<button class="button_1">Click me 1</button>
</section>

<section class="two">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p>
<button class="button_2">Click me 2</button>
</section>

<section class="three">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. A assumenda ipsam, rem fugit accusantium fugiat ea labore quam impedit, praesentium quisquam. Quia quam, et accusantium labore eius est accusamus perferendis.</p>
<button class="button_3">Do something else</button>
</section>





Js fiddle example

Answer Source

you need to scroll to the section only after you show it.

I've just optimized your script to work with all the section that you want. Put the class btn on all the buttons.

$(".btn").on("click", function() {
  var section = $(this).closest('section');
  var next = section.next('section').show();

  $("html, body").animate({
    scrollTop: next.offset().top
  }, 1000);
});

Please, have a look at https://jsfiddle.net/6y4qwLbq/1/

If you want to hide them you can use this variant:

$(".btn").on("click", function() {
    var section = $(this).closest('section');
  var next = section.next('section');

  section.slideUp();
  next.slideDown();
});

https://jsfiddle.net/vjm95303/

All the best.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download