scrollTop() when toggle back to original state

Question

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'
      });
   });
});

possible duplicate of [jQuery Set Cursor Position in Text Area](http://stackoverflow.com/questions/499126/jquery-set-cursor-position-in-text-area) — Alfred Huang, Sep 24 '14 at 01:11

Alex · Accepted Answer · 2014-09-24T01:27:43.513

1

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');
           });

       }
   });
});

edited Sep 24 '14 at 01:27

answered Sep 24 '14 at 01:10

Alex

5,298
4
29
34

I really like what you did ! But it seems to mess up my other jquery code – Chunmuchy Sep 24 '14 at 01:17
What does the '$("#dropdown").toggle('slide', {' do? Does it show/hide the element. If so I have updated my code above. – Alex Sep 24 '14 at 01:20
yeah, it shows/hides the element, when clicked a div slides down, and when clicked again, the div slides up. – Chunmuchy Sep 24 '14 at 01:21
seems to be having the same problem as earlier, it stops all the other jquery code I have in – Chunmuchy Sep 24 '14 at 01:25
Looks like there was a JS syntax issue before. – Alex Sep 24 '14 at 01:30
YES ! the code you just updated works like a charm ! Thank you so much ! I'm pretty new to if statements on jquery so this is pretty good study ! Thanks again ! – Chunmuchy Sep 24 '14 at 01:31

score 0 · Answer 2 · answered Sep 24 '14 at 01:08

0

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

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

answered Sep 24 '14 at 01:08

Alfred Huang

17,654
32
118
189

scrollTop() when toggle back to original state

2 Answers2