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

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

slideDown（）

方法

---

现在，C部分向下滚动一点（因为新内容使它这样做）。这就是我想要阻止的。是否有一种方式可以让浏览器自动滚动页面，使其与加载内容之前的位置完全相同？

您可能正在使用锚定标记use

javascript:void（0）中的#in href属性则页面将不会滚动。
如果要确保按钮在屏幕上完全不移动，即使在按钮上方添加了内容，也应这样做：

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

如果您在页面上经常使用此功能，您可能希望将代码包装得更好一些。这是一张工作票

这也可能是有趣的阅读：





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

这里有一个例子：

更新

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

更新后的示例：


这是保存部分：

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);
});

这听起来是一个很有希望的解决方案，如果可行的话，比我的好。你能举个例子吗？我不确定我是否完全理解。当您单击#value page get scroll to top时，这是一个默认属性。我不明白您在说什么。我应该在href属性中使用
#
还是
javascriot:void（0）
？请编辑你的答案，给出一个完整的例子好吗？使用javascript:void（0）；
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);