Question

我有一个带有一些隐藏的div和链接的页脚，应该在点击不是时显示div：

<div class="rvc-footer">

  <div id="block1" class="rvc-footer-block">
    Block1
  </div>
  <div id="block2" class="rvc-footer-block">
    Block 2
  </div>
  <div>
    <a class="footer-button" href="#block1">Block1</a>
    <a class="footer-button" href="#block2">Block2</a>
  </div>
</div>

使用时

// On clicking of the links do something.
link.on('click', function(e) {
  e.preventDefault();
  var a = $(this).attr("href");
  $(a).slideToggle();
});

显示div，内容向下滚动，链接不再可见（当链接位于浏览器底部时）。有没有办法强制浏览器保持在链接位置。

JSFiddle

Answer 1

在$(a).slideToggle();的动画结束后，您可以将scrollTop的{{1}}设置为按钮div html, body的顶部偏移设置。

.footer-button-wrapper

// Get all the links.
var link = $("a.footer-button");

console.log(link);

// On clicking of the links do something.
link.on('click', function(e) {

  e.preventDefault();

  var a = $(this).attr("href");
  console.log(a);
  $(".rvc-footer-block").not(a).slideUp();
  //$(a).slideToggle(function(){
  //  $("html, body").animate({ scrollTop: $('.footer-button-wrapper').offset().top }, 600);
  //});

  $(a).animate({
    height: 'toggle'
  },
               {
    step: function () {
      $("html, body").animate({ scrollTop: $('.footer-button-wrapper').offset().top }, 0);
    }
  });
});

.rvc-footer {
  margin-top: 1000px;
}

.footer-button-wrapper {
  margin-top: 10px;
}

.rvc-footer-block {
  display: none;
  border: 1px solid;
}

.footer-button-wrapper .footer-button {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

Answer 2

像这样使用：

// On clicking of the links do something.
link.on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  var a = $(this).attr("href");
  $(a).slideToggle();
});

使用slideToggle（）显示前一个div时，如何防止滚动？

2 个答案: