Scroll to top of scrolling div

Question

I am using code I got from this page - Flip div with two sides of html and am trying to have the div that spins around scroll to the top slowly as it spins. (side 2) This is what I am currently trying from this page.

     $('#back').click(function (e) { //#A_ID is an example. Use the id of your Anchor
    $('html, body').animate({
        scrollTop: $('#side-2').offset().top - 20 //#DIV_ID is an example. Use the id of your destination on the page
    }, 'slow');
});

and this is the flip code I am using:

document.getElementById( 'back' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

}, false );

document.getElementById( 'front' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

}, false );

I have tried various code I have found here on SO and elsewhere using scrollTop but I can't seem to dial it in.

Steve K · Accepted Answer · 2017-12-02T13:00:54.900

1

From what I can tell there are a couple of things that could be the problem. First being that you haven't closed the click function on your jquery code with });. Not sure if it is just because you forgot to copy it over or if you are just missing it. Next if you have your jquery code scrolling the body above the code that is adding and removing classes this may be causing some issues. Try putting your scrolling code below the the code adding and removing classes like so:

document.getElementById( 'back' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip flip-side-1';
    document.getElementById( 'side-1' ).className = 'flip flip-side-2';

}, false );

document.getElementById( 'front' ).addEventListener( 'click', function( event ) {

    event.preventDefault();
    document.getElementById( 'side-2' ).className = 'flip';
    document.getElementById( 'side-1' ).className = 'flip';

}, false );

$('#back').click(function (e) { 
  e.preventDefault();
  $('html, body').animate({
      scrollTop: $('#side-2').offset().top - 20
  }, 'slow');
});

Also make sure that you are scrolling the body of your page. If you have another div that is doing the scrolling you would need to change the code that does the scrolling to include the scrolling div like so:

$('#back').click(function (e) { 
  e.preventDefault();
  $('.your-scrolling-div').animate({
      scrollTop: $('#side-2').offset().top - 20
  }, 'slow');
});

I have also simplified the process a little for you in the following fiddle if you want to check it out

Fiddle Demo

Hope this helps.

edited Dec 02 '17 at 13:00

answered Dec 02 '17 at 11:08

Steve K

8,505
2
20
35

The }); was there it just didn't make it into the code box. I fixed that up there. Let me try your code right quick. – Bizzaro Dec 02 '17 at 11:52
Unfortunately I can't get what you did in the fiddle to work on the site (or the other code) even though I recreated it verbatim best I could with my content. – Bizzaro Dec 02 '17 at 12:21
It is not scrolling because you do not scroll the body in your page you need to change #('html, body') in your scrolling code to whatever div is the scrolling container. I think it is your .content div. – Steve K Dec 02 '17 at 12:36
Ugggh I knew it was something like that. Changing that works on my original script. On your simplified fiddle script it scrolls but still won't flip for some reason. I'm gonna mark it solved anyway for future generations ha ha. – Bizzaro Dec 02 '17 at 12:55
Ok I will update the answer with that as well. More than likely with the one that I wrote out on the fiddle you would have to change a bunch of css and markup but if you got it working with your original script you should be good to go. – Steve K Dec 02 '17 at 12:58
Is there a way to make that scroll slower other than just using the default "slow" speed? – Bizzaro Dec 02 '17 at 14:37
Change the word slow and remove the quotes to a number like 2000 I changed my fiddle to show you – Steve K Dec 02 '17 at 17:17
Yeah I tried that but for some reason it seemed to go faster than when "Slow" is in there. I decided it's not that big a deal. – Bizzaro Dec 03 '17 at 22:21
Did you look at the fiddle I changed it so you can see you need to remove the quotes as well as the word slow then replace with a number value. The higher the number the slower it will scroll – Steve K Dec 04 '17 at 01:32
Nope totally missed the removal of the quotes. My bad. (This is why javascript drives me crazy) – Bizzaro Dec 05 '17 at 12:00

Scroll to top of scrolling div

1 Answers1