动画自动滚动到 div onclick [关闭]

Question

我有一个简单的菜单，位置固定，里面有一些文字，还有这个菜单下的一些框（div）。 我正在寻找一个代码，当我单击菜单内的一个文本时，页面会自动滚动到 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>

简单地说，我希望当我按下“自动滚动到 (DIV1) onclick on me”时，页面自动滚动到 div“DIV1”，当我按下“自动滚动到 (DIV3) onclick on me”时页面自动滚动到“DIV3” 但请注意***当我想向上滚动到 DIV 时，可以执行此操作（向上滚动）的代码，例如：当我按下“自动滚动到 (DIV3) onclick on me”时，页面滚动到“DIV3”，但是当我按下“自动滚动到（DIV2）点击我”时，代码应该能够让页面滚动到“DIV2”。（还要注意它是固定菜单）

Answer 1

检查一下：

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

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

Answer 2

看看这个：

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


  });
});

Answer 3

你需要做这样的事情：

<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>