スクロールを#hashにアニメートし、ページ上に要素が隠されているようにします

Question

問題があります。私はスクロールaniamtionで選択された要素にスクロールするjavascript関数を持っています。 これはうまくいきますが、問題は私が上にスライド/スライドダウン（表示非表示）するときです。

クリックした場合のリンクは、.showです。セクションを表示しています。リンクにこのクラスがない場合は、.slideUp関数を使用してこの要素を非表示にします。そして、これはバグを生み出し、裏地は正確ではありません（間違った場所への嫌がらせ）。 javascriptは隠れ要素の高さを考慮に入れて、間違ったものを計算するようです。私はこれをどのように修正するのか分かりません。 ありがとうございます。

var $root = $('html, body'); 
     $(document).on('click','.scroll-ani', function(event){ 
      if ($(this).hasClass('show')) { 
       if ($('#about').is(':hidden')) { 
       $('#about').slideDown(); 
       } 
      } else { 
       // if i replace slideUp with .hide() it will work well, but will not animate this slideUp effect. 
       $('#about').slideUp(); 
      } 
      var hash = this.hash; 
      if (hash && this.href.slice(0, -hash.length-1) == location.href.slice(0, -location.hash.length-1)) { 
       $root.animate({ 
        scrollTop: $(hash).offset().top 
       }, 'normal', function() { 
        location.hash = hash; 
       }); 
       return false; 
      } 
     }); 

Answer 1

私は2つのことを試みます。 slideDown/Upを使用する代わりに、cssで高さを変更し、要素に高さのCSS遷移を与えます。また、スクロールアニメーションのためにこのライブラリを使用することもできます：http://demos.flesler.com/jquery/scrollTo/。

$ root.animate（...）で要素にスクロールすると、slideDownアニメーションが終了しないため、offset（）。topに最終的な正しい値が得られないことがあるかもしれません。手動でCSSの高さを設定し、トランジションと組み合わせて問題を解決する必要があります（jqueryは従来のjsアニメーションを使用し、CSSのトランジションは使用しません）