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

我已经尝试了几个小时来实现一个平滑的滚动对我的项目，但似乎我不能使它工作

我已经检测到问题所在。如果锚定标签所在的容器位于固定位置或绝对位置，则我尝试过的任何方法都不起作用

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

我找到的最简单的库是带有说明的“smoothscroll.js”。（但是我尝试了很多，我发现所有这些都有同样的问题

我的Html（简化为示例）：

这是你的

正如你所看到的，虽然游戏中没有js，但锚链接工作得非常好。如果你们中的任何人能帮助我实现这些锚的平滑滚动，我将永远感激。我很绝望

注：（通常当我试图使库工作时，锚停止工作）

谢谢，请原谅我的英语不好

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

这很好：（使用jquery）

如果我添加到容器中：

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

---

它停止工作：

您可以使用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;
      }
    }
  });
});

看一看：

---

首先，在第一把小提琴中，您试图使用

名称

导航链接，它们应替换为

id

第二，在你的最后一把小提琴中，你试图

动画化
html
和
body
标记，而不是
。修复了
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
        );
    }

});

活着

.
不，你不能。我已经尝试了（正如我所说的）很多种方法，这就是其中之一。我制作了一个JSFIDLE…如果你包含这些代码，你会发现它们不会解决我的问题。事实上，正常的锚链接在atm上工作（没有转换）停止工作。哦，天哪……请阅读问题的标题。我知道如何在普通容器上使用此功能。我想使用scroll:auto在固定或绝对容器上使用此功能。如果您想使用小提琴，请使用我的，并尝试在那里使用它。无论如何，如果我在上一次评论中听起来有点粗鲁，请原谅我。Ty尝试在此处提供帮助：你的小提琴更新，我只是把内容包装在一个固定的有一定高度的div上，你可以看到你的代码停止工作。太多了。如果可以的话，我会给你更多的代表。我真的很感激。请将你的想法转发给这个门户的权威：P
    $(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;
      }
    }
  });
});

$("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
        );
    }

});