Question

我有一个简单的菜单，里面有固定的位置，里面有一些文字，还有一些菜单（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>

简单地说，我想按下“自动滚动到（DIV1）onclick on me”页面自动滚动到div“DIV1”，当我按下“自动滚动到（DIV3）onclick on me”时页面自动滚动到“DIV3” 但是请注意***当我想要向某个方向滚动该代码时（滚动），例如：当我按下“自动滚动到（DIV3）onclick on me”时，页面滚动到“DIV3”但是当我按下“自动滚动到（DIV2）onclick on me”时，代码应该能够让页面滚动到“DIV2”。（还要注意它是固定菜单）

Answer 1

你需要做这样的事情：

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

Answer 2

检查：

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

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

Answer 3

检查出来：

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


  });
});

动画自动滚动到div onclick

3 个答案: