使用 jQuery 在单击按钮上方添加内容时防止页面移动答案

【问题标题】：Prevent page from moving when content is added above clicked button with jQuery使用 jQuery 在单击按钮上方添加内容时防止页面移动
【发布时间】：2015-12-19 10:50:18
【问题描述】：

我的页面上有三个部分，从上到下，A、B 和 C。您单击 C 部分中的一个按钮。现在，一些内容已加载到 A 部分（在您单击的按钮上方），例如内容使用 jQuery 的slideDown() 方法。

现在，C 部分向下滚动一点（因为新内容正在这样做）。这就是我想阻止的。有没有办法让浏览器自动滚动页面到与加载内容之前完全相同的位置？

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

如果您想确保按钮根本不在屏幕上移动，即使在其上方添加了内容，也应该这样做：

$("mybutton").click(function() {
    //Save the vertical position of the button before content is added.
    var x1 = $(this).offset().top;
    //Do whatever the button is suppose to do, including adding the new content.
    doAllTheStuff();
    //See how much we moved.
    var x2 = $(this).offset().top;
    var dx = x2 - x1;
    //Scroll the same amount to keep the button from moving on the screen.
    $(document).scrollTop($(document).scrollTop() + dx);
});

如果您在页面上经常使用此功能，您可能希望将代码包装得更好一些。这是一个有效的JSFiddle。

这也可能是有趣的阅读：

【讨论】：

【解决方案2】：

单击按钮（可能是您的元素）时，您可以滚动页面到元素。

$('html, body').animate({ scrollTop: $("#element").offset().top }, 2000);

这里是一个例子：https://jsfiddle.net/kmser1uh/

更新

在同一位置滚动的一个技巧是在滚动后保存页面中元素的偏移量，并在按钮单击后为滚动设置动画。

更新的例子：

https://jsfiddle.net/kmser1uh/2/

这是保存部分：

var el;
var elPos;
var clr;

$(window).scroll(function(){
    clearTimeout(clr);
  clr = setTimeout(function(){
    $('.fullWidthBodyElement').each(function(){
    if ($(window).scrollTop() > $(this).offset().top && 
            $(window).scrollTop() < $(this).offset().top + $(this).height()) {
                    el = this;
                    elPos = $(window).scrollTop() - $(this).offset().top;
        }
        });
  },500);
});

这是简历位置：

$('html, body').animate({ scrollTop: ($(el).offset().top + elPos) }, 2000);

【讨论】：

【解决方案3】：

您可能会在锚标记中使用 # in href 属性使用javascript:void(0);然后您的页面将不会滚动。

【讨论】：

这听起来像是一个很有前途的解决方案，如果它有效的话会比我的更好。你能举个例子吗？不确定我是否完全理解。
它是一个默认属性，当你点击 #value page 滚动到顶部 Button
我不明白你在说什么。我应该在 href 属性中使用# 还是javascriot:void(0)？您能否编辑您的答案以提供完整的示例？
使用 javascript:void(0);