滚动到滚动 div 的顶部

Question

我正在使用从该页面获得的代码 - Flip div with two sides of html，并试图让旋转的 div 在旋转时缓慢滚动到顶部。 （第 2 面）这是我目前在 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 );

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

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 Demo

希望这会有所帮助。