Jquery SlideToggle和滚动

Question

我遇到了出现在我的页面底部的滑动链接问题。 有效我希望用户点击显示/隐藏隐藏的div（工作正常）

的问题是页面不向下滚动，以显示现在，没有隐藏的div

作为一个jQuery新手，有什么办法切换div，然后将其居中在页面上？或者至少向下滚动，没有事情变得太复杂？

感谢

Answer 1

为了执行这个功能，我建议你使用回叫你的slideToggle通话使用scrollTop函数来设置文件滚动。您可以通过使用offset来确定触发容器相对于页面的顶部位置，以确定scrollTop设置器的值。我建议限制滚动行为只在元素显示时触发，而不是隐藏。

一般来说，直接设置页面滚动可以是一个有点震撼的用户体验。出于这个原因，我实际上会给你动画scrollTop的代码，而不是直接使用scrollTop函数设置它，但这种方法并不是必须的，因为直接调用scrollTop将平等定位页面。我只是认为，作为一个用户，我宁愿看到一个渐进的滚动，而不是突然的位置变化。

的代码，例如，将采取以下形式：

$(".myShowHideLink").click(function() { 
    $(".myToggleContainer").slideToggle("slow", function() { 
     if ($(this).is(":visible")) { 
      $(document).animate({ 
       scrollTop: $(this).offset().top 
      }, "slow") 
     } 
    }); 
}); 

您可能需要实际使用$(this).offset().top - 50或相似的，所以容器的顶部上方滚动的仅有几个像素的东西，但是这了给你。我发现我不喜欢我的元素对着窗口的顶部边界。

我很抱歉我没有为此创建测试用例，因为我是从臀部拍摄的，但如果它不能像广告一样工作，请告诉我，我会调整代码。