Wie wird der Fokus/Bildlauf beim Klicken auf ein Element und bei erneutem Klicken auf ein Element verschoben?

Question

Ich habe ein Glyphicon, das beim Klicken ein Element so schaltet, dass es jetzt angezeigt wird, aber ich brauche auch die Seite, um diesem Element den Fokus zu geben oder zu diesem Element zu blättern.

$(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 %> 
    }); 
}); 

Dies funktioniert, wenn $('.glyphicon') erste geklickt wird und das Element in Sicht kommt, das Problem ist, dass, wenn $('.glyphicon'), die css von $('.comments') auf display: none geändert, aber der zweite Teil des Codes noch nach unten scrollt die Seite wo $('.comments') lag. Ich möchte das nicht, stattdessen möchte ich, dass die Seite ganz nach oben scrollt (als wäre sie neu geladen worden).

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: Für eine bessere Kompatibilität, können Sie $("html,body") statt $("body") verwenden, wenn Scroll-Ereignisse mit