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代码上的click函数。不确定是不是因为你忘记复制它或者你只是错过它。接下来，如果您的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

希望这有帮助。

滚动到滚动div的顶部

1 个答案: