如何在點擊時將焦點/滾動移動到元素上，然後再次單擊時移動回到元素上？

Question

我有一個圖形，當點擊切換一個元素，以便它現在顯示，但是我也需要頁面給該元素焦點或滾動到該元素。

$(document).on('turbolinks:load', function(){ 
    $('.glyphicon.glyphicon-comment').on('click', function() { 
    $('.comments').slideToggle({ 
     duration: 500, 
    }); 
    <% unless @photo.comments.count == 0 %> 
    $('body').animate({ scrollTop: $('.comments').offset().top 
    }, 500); 
    <% end %> 
    }); 
}); 

時$('.glyphicon')第一次點擊和元素映入眼簾的這個工作，問題是，當$('.glyphicon')，$('.comments')的css更改爲display: none，但代碼的第二部分仍然向下滾動頁面其中$('.comments')位於。我不希望發生這種情況，而是希望頁面一直滾動到頂部（就好像它已被重新加載）。

Answer 1

$(document).on('turbolinks:load', function(){ 
    $('.glyphicon.glyphicon-comment').on('click', function() { 
     if($('.comments').css('display') != 'none')) { //if($('.comments').is(':visible')) - work too 

      $('.comments').slideToggle({ 
       duration: 500, 
      }); 

      <% unless @photo.comments.count == 0 %> 
       $('body').animate({ scrollTop: $('.comments').offset().top}, 500); 
      <% end %> 
     }else{ 
      $("body").animate({ scrollTop: 0 }, 500); 
     } 
    }); 
}); 

PS：爲了更好的兼容性，您可能需要使用滾動事件時使用$("html,body")而不是$("body")