Question

我有一个glyphicon，当点击切换一个元素以便现在显示它时，但我还需要页面给该元素焦点或滚动到该元素。

$(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')时，css的{{1}}更改为{{1}但是，代码的第二部分仍然向下滚动页面到$('.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")

如何使焦点/滚动移动到单击时的元素，然后再次单击时返回？

1 个答案: