CODEWITHSUNDEEP
jqueryhtmlweb
Chunmuchy
Chunmuchy

Reputation: 19

scrollTop() when toggle back to original state

So for one of my buttons, I made it so that when clicked, a div(#drowpdown) would drop down near the footer of the webpage and would scroll down as well where the anchor point is located.

Is there a way to scroll back up to the top of the website as the #dropdown is toggled to its original position ?

heres my html

        <div id = "button_hold">
            <a href = "#dropdown"><img id = "drop_button" src = "images/drop_button.png"/></a>
        </div>
        <div id = "dropdown">
            <p>here are some stuff</p>
        </div>

and the jquery

$(document).ready(function(){
   $("#drop_button").click(function () {
      $("#dropdown").toggle('slide', {
         duration: 1000,
         easing: 'easeOutExpo',
         direction: 'up'
      });
   });
});

Upvotes: 0

Views: 234

Answers (2)

Alex
Alex

Reputation: 5278

What about something like this:

$(document).ready(function(){
   $("#drop_button").click(function () {
       if ($("#dropdown").hasClass('slide')) {

           $("#dropdown").slideUp(300, function() {
               $("#dropdown").removeClass('slide');
               $('html, body').animate({
                   scrollTop: 0
               }, 1000, 'easeOutExpo');
           });

       } else {

           $("#dropdown").slideDown(300, function(){
               $("#dropdown").addClass('slide');
               $('html, body').animate({
                   scrollTop: $('#dropdown').offset().top
               }, 1000, 'easeOutExpo');
           });

       }
   });
});

Upvotes: 1

Alfred Huang
Alfred Huang

Reputation: 18235

To set a scroll position of an element, you can use the below:

$('#dropdown').scrollTop(0);

Upvotes: 0

Related Questions