Question

我已经花了好几个小时在我的项目上实现平滑的滚动，但似乎我无法使它工作。

我已经发现了问题所在。如果锚标签所在的容器位于固定位置或绝对位置，那么我尝试过的任何工作都没有。

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

我找到的最简单的库是＆＃34; smoothscroll.js＆＃34;附有说明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播放时，锚链接工作完全正常。如果你们中的任何人能帮助我实现顺利滚动到那些锚点，我将永远感激不尽。我非常绝望。

注意:(通常一旦我尝试使图书馆工作，锚点就会停止工作）

谢谢并原谅我可怜的英语

编辑：另一个例子来自下面一个不正确的答案。

这很好用：http://jsfiddle.net/vdv9qko8/4/（用jquery）

如果我添加到容器中：

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

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

Answer 1

首先，在第一个小提琴中，您尝试使用name导航链接时，应将其替换为id。

其次，在您的最后一个小提琴中，您尝试animate html和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

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

2 个答案: