固定定位容器上的平滑滾動

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