滚动到滚动顶部 div

Question

我正在使用从该页面获得的代码 - 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');
});

这是我正在使用的翻转代码：

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

我尝试了在 SO 和 elsewhere 上使用 scrollTop 找到的各种代码，但我似乎无法拨入它。

Answer 1

据我所知，有几件事可能是问题所在。首先是您还没有使用 }); 关闭 jquery 代码上的点击功能。不确定是不是因为你忘了复制它，或者你只是错过了它。接下来，如果您的 jquery 代码在添加和删除类的代码上方滚动正文，这可能会导致一些问题。尝试将滚动代码放在添加和删除类的代码下方，如下所示：

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

还要确保您正在滚动页面的主体。如果您有另一个正在滚动的 div，您需要更改执行滚动的代码以包含滚动 div，如下所示：

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

我也在下面为你简化了一些过程fiddle如果你想看看

Fiddle Demo

希望这对您有所帮助。

滚动到滚动顶部 div

Scroll to top of scrolling div

jquery

scrolltop