Javascript 动画自动滚动到div onclick

我有一个固定位置的简单菜单，里面有一些文本，菜单下有一些框（divs）。 我正在搜索一个代码，当我点击菜单中的一个文本时，页面自动滚动到一个div或一个div向下，我确实找到了这个代码，但它是不完整的，因为当页面自动滚动到一个div时，如果你想让页面滚动到另一个div向上滚动到这个div，它不能自动滚动，我的意思是它不能向上滚动，只能向下滚动。 菜单的代码和文本：

<style>
#menu {
    background-color: #ccc;
    position:fixed;
    width:100%
}

.menutext {
    padding:25 40 0 !important;
    display:inline-block;
}

.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}
</style>

<div id="menu">
    <div class="menutext">Auto-scroll to (DIV1) onclick on me</div>
    <div class="menutext">Auto-scroll to (DIV2) onclick on me</div>
    <div class="menutext">Auto-scroll to (DIV3) onclick on me</dive>
    <div class="menutext">Auto-scroll to (DIV4) onclick on me</div>
</div>

<br><br><br>

<div class="alldivs"><div id="DIV1">DIV1</div></div>
<div class="alldivs"><div id="DIV2">DIV2</div></div>
<div class="alldivs"><div id="DIV3">DIV3</div></div>
<div class="alldivs"><div id="DIV4">DIV4</div></div>

#菜单{
背景色：#ccc；
位置：固定；
宽度：100%
}
.menutext{
填充：25 40 0！重要；
显示：内联块；
}
奥尔迪夫斯先生{
宽度：300px；
高度：200px；
背景色：A9A9；
}
自动滚动到（DIV1）onclick on me
自动滚动到（DIV2）onclick on me
自动滚动到（DIV3）onclick on me
自动滚动到（DIV4）onclick on me




第一组
第二组
第三组
第四组

简单地说，我想当我按下“自动滚动到（DIV1）onclick on me”时，页面自动滚动到div“DIV1”，当我按下“自动滚动到（DIV3）onclick on me”时，页面自动滚动到“DIV3”

---

但请注意***当我想向上滚动到一个DIV-UP时，代码可以这样做（向上滚动），例如：当我按“自动滚动到（DIV3）onclick on me”时，页面滚动到“DIV3”，但当我按“自动滚动到（DIV2）onclick on me”时，代码应该可以让页面滚动到“DIV2”。（还要注意，它是固定菜单）

您需要执行以下操作：

<style>
#menu {
    background-color: #ccc;
    position:fixed;
    width:100%
}

.menutext {
    padding:25px 40px 0px 0px;
    display:inline-block;
}

.alldivs {
    width:300px;
    height:200px;
    background-color:a9a9a9;
}

#content {
    /* added for visualization */
    position: absolute;
    top: 100px;
    border: 1px solid black;
    height:200px;
    overflow: hidden;
}
</style>
<div id="menu">
    <div class="menutext" data-scrollid="DIV1">Auto-scroll to (DIV1) onclick on me</div>
    <div class="menutext" data-scrollid="DIV2">Auto-scroll to (DIV2) onclick on me</div>
    <div class="menutext" data-scrollid="DIV3">Auto-scroll to (DIV3) onclick on me</div>
    <div class="menutext" data-scrollid="DIV4">Auto-scroll to (DIV4) onclick on me</div>
</div>

<div id="content">
    <div class="alldivs"><div id="DIV1">DIV1</div></div>
    <div class="alldivs"><div id="DIV2">DIV2</div></div>
    <div class="alldivs"><div id="DIV3">DIV3</div></div>
    <div class="alldivs"><div id="DIV4">DIV4</div></div>
</div>

<script>
    var $content = $('#content');
    $('.menutext').each(function(){
        var $this=$(this);
            scrollTo = 0;
        $this.on('click', function(){
            var $target = $('#'+$this.data('scrollid'));
            scrollTo = scrollTo + $target.position().top + $target.scrollTop();
            $content.animate({scrollTop: scrollTo}, 1000);
        })
    })
</script>

#菜单{
背景色：#ccc；
位置：固定；
宽度：100%
}
.menutext{
填充：25px 40px 0px 0px；
显示：内联块；
}
奥尔迪夫斯先生{
宽度：300px；
高度：200px；
背景色：A9A9；
}
#内容{
/*为可视化添加了*/
位置：绝对位置；
顶部：100px；
边框：1px纯黑；
高度：200px；
溢出：隐藏；
}
自动滚动到（DIV1）onclick on me
自动滚动到（DIV2）onclick on me
自动滚动到（DIV3）onclick on me
自动滚动到（DIV4）onclick on me
第一组
第二组
第三组
第四组
var$content=$（“#content”）；
$（'.menutext'）。每个（函数（）{
var$this=$（this）；
scrollTo=0；
$this.on（'click'，function（）{
var$target=$（'#'+$this.data（'scrollid'）；
scrollTo=scrollTo+$target.position（）.top+$target.scrollTop（）；
$content.animate（{scrollTop:scrollTo}，1000）；
})
})

检查此项：

$(function(){

  var offsets = [],
      menuText = $('#menu .menuText');

  $("div.contentDiv").each( function(i, div) {
      offsets.push({ id: div.id, offset: $(div).offset().top - 60});
  });

  $(window).scroll(function(e) {
    var start = $(this).scrollTop();
    for ( var div = 0; div < offsets.length; div++ ) {
      if ( start > offsets[div].offset ) { 
        menuText.removeClass('menutext2').addClass('menutext');  

        menuText.filter('[linkId="'+offsets[div].id+'"]').addClass('menutext2').removeClass('menutext');
        }
    }

    if ( start === 0 ) {         
    menuText.removeClass('menutext2').addClass('menutext');  
    }


  });
});

$（函数（）{
var偏移量=[]，
menuText=$（“#menu.menuText”）；
$（“div.contentDiv”）。每个（函数（i，div）{
push（{id:div.id，offset:$（div.offset（）.top-60}）；
});
$（窗口）。滚动（功能（e）{
var start=$（this.scrollTop（）；
对于（var div=0；div偏移量[div].offset）{
menuText.removeClass（'menutext2'）.addClass（'menuText'）；
menuText.filter（'[linkId=“”+offsets[div].id+'“]'）.addClass（'menutext2'）.removeClass（'menuText'）；
}
}
如果（开始===0）{
menuText.removeClass（'menutext2'）.addClass（'menuText'）；
}
});
});

检查此项：

jQuery(document).ready(function($) {

    $(".scroll").click(function(event){     
        event.preventDefault();
        $('html,body').animate({scrollTop:$(this.hash).offset().top - 59}, 800); 
    });
});

---

您还有其他要求吗？@Abdallah:滚动可能很棘手，因为它会更改容器中每个元素的偏移量。上面的代码不是使其工作的唯一方法，但经过几次猜测后，它对我来说是有意义的，即尝试一些东西并遵循你的直觉。它什么都不做：（尝试一下，它甚至不会滚动到任何地方。它在中工作正常。确保你在

中有

，并且语法正确。谢谢。它工作：）