Javascript 动态divs和scrollpop

我有一个单页网站：

每个部分都根据用户的窗口动态调整大小。我试图弄清楚，当点击链接时，如何让jQuery平滑滚动功能滚动到每个部分的顶部。在第一部分“资金领域”中效果很好，我只使用了一个简单的offset（）.top，但其他部分不起作用，因为它们不知道滚动多远，因为窗口大小总是不同的

我一直在尝试让offset（）或position（）工作，但没有骰子。谢谢你的建议

以下是我的jQuery：

`

---

`

$。偏移量

和

$。位置

可能有点不可靠，尤其是当你有很多复杂的布局时，就像你的页面一样。我过去使用的技巧如下：

var de = document.documentElement ? document.documentElement : document.body;
var elm = $('get_your_anchor_element').get(0);
var destScroll, curScroll = de.scrollTop;

/// check for the function scrollIntoView
if ( elm.scrollIntoView ) {
  /// get the browser to scrollIntoView (this wont show up yet)
  elm.scrollIntoView();
  /// however the new scrollTop is calculated
  destScroll = de.scrollTop;
  /// then set the scrollTop back to where we were
  de.scrollTop = curScroll;
  /// you now have your correct scrollTop value
  $(de).animate({scrollTop:destScroll});
}
else {
  /// most browsers support scrollIntoView so I didn't bother
  /// with a fallback, but you could just use window.location
  /// and jump to the anchor.
}

单击事件可能会发生上述情况。唯一需要改进的是，不同的浏览器在不同的基本元素（body或html）上滚动。当我使用这个时，我有我自己的可滚动元素，所以我不需要知道代理使用的是哪一个。。。当我有时间的时候，我会看看我是否能找到一个好的代码来检测差异

以上内容在我测试过的所有现代浏览器（Firefox、Safari、Chrome）中都有效，但我不需要支持Internet Explorer，因此对此我不确定

更新： 我不太清楚您的实现是怎么回事-可能页面内容太多，以至于您实际上可以看到

.scrollIntoView（）

正在发生-这从来不是我的经历，但是我没有在屏幕上看到太多内容。考虑到这一点，我已经实现了一个基本系统，我建议您使用它，并将您需要的每个额外部分构建到其中：

这样，你就知道你有一个工作系统开始，并将很容易地检测到是什么阻止它工作。关于chiaro.js，您的实现似乎还可以——如果在文件的许多不同区域出现一些小爆炸——但是这部分有点错误：

$('#anchor-aboutus').click(function() {
    event.preventDefault();
    if(panelOpen == true) {
        $('#slide-panel-content')
                      .stop(true, true)
                      .animate({height: '0px'}, 600, function() {
            $('#panel-content-container').hide();
            $('.scrollableArea').css('z-index', '11');
            elm.scrollIntoView(true)
                              .animate({scrollTop:destScroll}, 1000);
            panelOpen = false;
        });
    }else{
        elm.scrollIntoView(true).animate({scrollTop:destScroll});
    };
});

在上面的代码中，只有当

panelOpen===true

时，才能获得正确的

destcroll

值。啊，事实上，我还发现了另一个问题——这将解释为什么它不起作用：

elm.scrollIntoView(true)
  .animate({scrollTop:destScroll}, 1000);

上面的代码混合了纯JavaScript和jQuery，

elm

var是一个普通的DOM元素（它支持scrollIntoView方法）。但是您随后试图将jQuery的

animate

方法链接到混合中，您还应该在负责滚动条的元素上触发animate方法。您应该使用的内容如下：

$('#anchor-aboutus').click(function(e) {
  var currentScroll, destScroll;
  e.preventDefault();
  if(panelOpen == true) {
    $('#slide-panel-content')
      .stop(true, true)
      .animate({height: '0px'}, 600, function() {
        $('#panel-content-container').hide();
        $('.scrollableArea').css('z-index', '11');
        currentScroll = de.scrollTop;
        elm.scrollIntoView(true);
        destScroll = de.scrollTop;
        de.scrollTop = currentScroll;
        $(de).animate({scrollTop:destScroll}, 1000);
        panelOpen = false;
      });
  }else{
    currentScroll = de.scrollTop;
    elm.scrollIntoView(true);
    destScroll = de.scrollTop;
    de.scrollTop = currentScroll;
    $(de).animate({scrollTop:destScroll}, 1000);
  };
});

/// store the current scroll position from the de element
currentScroll = de.scrollTop;
/// get the browser to do the scrollTo calculation
elm.scrollIntoView(true);
/// store where the browser scrolled to behind the scenes
destScroll = de.scrollTop;
/// reset our scroll position to where we were before scrollIntoView()
/// if you don't reset then the animation will happen instantaneously
/// because that is what scrollIntoView does.
de.scrollTop = currentScroll;
/// wrap the normal dom element de with jquery and then animate
$(de).animate({scrollTop:destScroll}, 1000);

但是，您还需要做的是确保

de

元素指向正确的元素-html或body，具体取决于浏览器-为此，您可以使用以下方法：

var de;

/// calculate which element is the scroller element
$('body, html').each(function(){
  if ( this.scrollHeight > this.offsetHeight ) {
    de = this;
    return false;
  }
});

alert( $(de).is('body') ) /// will be true for Chrome, false for Firefox.

您需要使用此代码代替以下代码：

var de = document.documentElement ? document.documentElement : document.body;

更改您使用的代码的原因如下：

$('#anchor-aboutus').click(function(e) {
  var currentScroll, destScroll;
  e.preventDefault();
  if(panelOpen == true) {
    $('#slide-panel-content')
      .stop(true, true)
      .animate({height: '0px'}, 600, function() {
        $('#panel-content-container').hide();
        $('.scrollableArea').css('z-index', '11');
        currentScroll = de.scrollTop;
        elm.scrollIntoView(true);
        destScroll = de.scrollTop;
        de.scrollTop = currentScroll;
        $(de).animate({scrollTop:destScroll}, 1000);
        panelOpen = false;
      });
  }else{
    currentScroll = de.scrollTop;
    elm.scrollIntoView(true);
    destScroll = de.scrollTop;
    de.scrollTop = currentScroll;
    $(de).animate({scrollTop:destScroll}, 1000);
  };
});

/// store the current scroll position from the de element
currentScroll = de.scrollTop;
/// get the browser to do the scrollTo calculation
elm.scrollIntoView(true);
/// store where the browser scrolled to behind the scenes
destScroll = de.scrollTop;
/// reset our scroll position to where we were before scrollIntoView()
/// if you don't reset then the animation will happen instantaneously
/// because that is what scrollIntoView does.
de.scrollTop = currentScroll;
/// wrap the normal dom element de with jquery and then animate
$(de).animate({scrollTop:destScroll}, 1000);

---

你为什么不直接使用锚定标签呢？我确实使用了锚定标签。对不起，我没听懂。我有锚标签，每个新的部分开始：非常感谢你的帮助！我将其插入到“关于我们”锚定的单击事件中，它会转到正确的位置，但它没有设置动画？有关函数，请参见chiaro.js第135行。再次感谢@jtrinker我已经用一些指针更新了我的答案，告诉你可以在哪里修改代码。希望能有帮助：）非常感谢你的帮助。谢谢你的时间！这是一个巨大的帮助。如果我能帮到你，请告诉我。啊，一点也不担心-我一直想为类似的网站设计创建一个这样的布局，所以你的问题促使我坐下来，着手解决一个更完整的解决方案：）很高兴它有帮助。