jquery滚动到ID或锚 - 滚动到顶部，如果已经在那里？

我一直在寻找试图找到原因和/或解决方案。我一直在使用jquery滚动到ID或锚 - 滚动到顶部，如果已经在那里？

$("#content").animate({scrollTop:$(#elementId).offset().top-183}, 600);

用于平滑滚动到<div>中的ID。 183是一个偏移量，所以我的元素在顶部。它可以工作，但如果我已经在那里再次单击它，它会滚动回顶部。如果我在元素下方点击它，它无法正常工作。如果我在元素上方，它才能正常工作。

在所有情况下，“scrolltop”不是正确的jQuery例程吗？或者，我是否需要确定元素是高于还是低于我，并相应地使用不同的命令？看起来这种行为没有太多文件，我只找到几个人提到它。也许我错过了简单的解决这个问题的东西？我会试着制作一个JSfiddle来说明这种行为，但是也许有人在这里看到过这个，并且有一个提示如何解决它？

来源

2015-07-11 Randy Mad-Dog

你能告诉我们一个演示？应该很好地工作... –

这可能有帮助，我通常在我的网站中使用这个简单的JavaScript片段scrolltotop/backtotop功能。

HTML

<body id="top"> 

<a href="#top" onclick="scrollToTop();return false">Back to Top &uarr;</a>

<script> 
var timeOut; 
function scrollToTop() { 
    if (document.body.scrollTop!=0 || document.documentElement.scrollTop!=0){ 
     window.scrollBy(0,-50); 
     timeOut=setTimeout('scrollToTop()',10); 
    } 
    else clearTimeout(timeOut); 
} 
</script>

来源

2015-07-11 18:17:41

它看起来当您滚动内#content变化偏移的元素等。这就是为什么目标元素的顶部偏移量已经在视图中时为零。要获得scrollTop的正确值，您必须将当前值scrollTop添加到偏移量。

$('#scroll').click(function() { 
 
    $("#content").animate({scrollTop:$("#content").scrollTop() + $('#target').offset().top-10}, 600); 
 
});

#content { 
 
    max-height: 100px; 
 
    overflow: scroll; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="content"> 
 
    
 
    <pre> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
 
    Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
 
    varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
 
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit 
 
    laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
 
    senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
 
    elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
 
    consectetur lorem tincidunt at. Suspendisse ac finibus sapien. 
 
    </pre> 
 
    
 
    <div id="target"> 
 
    Hello, World! 
 
    </div> 
 
    
 
    <pre> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget elementum lorem, sed commodo erat. 
 
    Maecenas a egestas lectus. Sed hendrerit ut quam id rhoncus. In iaculis dapibus nulla, ut iaculis metus 
 
    varius at. Nullam eleifend felis lacus, eget viverra elit pellentesque volutpat. Vestibulum ante ipsum 
 
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam ultrices, arcu pretium hendrerit 
 
    laoreet, ante nunc mollis orci, in egestas eros risus eget libero. Pellentesque habitant morbi tristique 
 
    senectus et netus et malesuada fames ac turpis egestas. Praesent dictum elit tortor, a tincidunt dolor 
 
    elementum at. Integer ullamcorper mauris id enim facilisis finibus. Etiam elementum lacus urna, ut 
 
    consectetur lorem tincidunt at. Suspendisse ac finibus sapien. 
 
    </pre> 
 

 
</div> 
 
<button id="scroll">Scroll to #target</button>

来源

2015-07-11 18:30:32 just95

jquery滚动到ID或锚 - 滚动到顶部，如果已经在那里？

回答

相关问题