固定定位容器上的平滑滚动

Question

我一直在尝试几个小时来实现我的项目上的平滑滚动，但似乎我无法使其工作。

我已经发现问题出在哪里。如果锚标签所在的容器位于固定位置或绝对位置，则我所尝试的任何操作都不起作用。

我已经在过去的项目中用不同的jquerys库实现了平滑的scrooling，没有任何问题，但这是我第一次必须将容器放在固定或绝对位置上。

我找到的最简单的库是“smoothscroll.js”，指令here。 （但我已经尝试了很多，我觉得与他们同样的问题

我的HTML（简化为打一个比方）：

<div class="contenido"> 
    <a name="Castellana" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK1</a> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 

    <a name="Florbaja" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK2</a> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 


    <a name="Staff" style="font-size: 50px; color: Red; background-color: yellow; display: block;">LINK3</a> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
    <br /> 
</div> 

和我的CSS：

.MenuSuperiorSeccion {  
    height:30px; 
    background-color:rgba(220,220,220,0.9); 
    position:fixed; 
    top:30px; 
    text-align:center; 
    overflow:hidden; 
    text-align:left; 
    } 
.MenuSuperiorSeccion ul {margin-top:5px;}  
.MenuSuperiorSeccion li { 
    display:inline-block; 
    text-transform:uppercase; 
    margin-left:20px;  
    font-weight:300; 
    } 
.MenuSuperiorSeccion li a {color:#666;} 
.MenuSuperiorSeccion li a:hover {color:#fff; font-weight:400; line-height:0;} 


.contenido {  
    background-color:aqua; 
    position:fixed; 
    bottom:90px; 
    top:90px; 
    width:400px; 
    overflow:auto; 
    padding:20px; 
    text-align:left; 
    } 

这里你有JSfiddle

正如你所看到的，虽然没有js在播放锚链接工作得很好，如果你有任何人可以帮助我实现一个平滑的滚动到这些锚点我会我永远gratefull。我非常渴望atm。

注：（通常只要我努力使图书馆的工作，主播停止工作）

感谢，并请原谅我的英语很差

编辑：从下面的uncorrect答案迈出的又一例子。

这工作得很好：http://jsfiddle.net/vdv9qko8/4/（用jQuery）

如果我添加到容器：

.fixed { 
    position:fixed; 
    top:120px; 
    height:400px; 
    overflow:auto; 
} 

它停止工作：http://jsfiddle.net/vdv9qko8/3/

Answer 1

首先，在第一个小提琴中，您尝试浏览与name的链接，应将其替换为id。

其次，在你最后一个小提琴中，你试图animatehtml和body标签而不是.fixed div。

下面是第一小提琴的解决方案：

$("a").click(function(event){ 

    event.preventDefault(); 
    navto = $($(this).attr("href")).offset().top + $('.contenido').scrollTop() - 90; 

    if($($(this).attr("href")).offset().top != 90){ //prevent scroll to current link 
     $('.contenido').animate({ 
      scrollTop: navto 
     }, 800 
     ); 
    } 

}); 

直播DEMO。

Solution to last fiddle。

Answer 2

您可以使用jQuery的这一要求：

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

哈瓦看看： DEMO