animated autoscroll to div onclick

Question

I have a simple menu with fixed position and some text inside it and some boxes under this menu(divs). I'm searching for a code that when I click on one of the texts that inside menu the page autoscrolls to a div of the divs down, indeed I found this code but it's incomplete because when the page autoscroll to a div if you want the page to scroll to another div up to this div it can't autoscroll, I mean it doesn't scroll up only scrolls down. The code of the menu and the text:

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

Simply, I want when I press on "Auto-scroll to (DIV1) onclick on me" the page autoscroll to the div "DIV1" and when I press on "Auto-scroll to (DIV3) onclick on me" the page autoscroll to "DIV3" BUT NOTE THAT*** WHEN I WANT TO SCROLL UP TO A DIV UP THE CODE ABLE TO DO THAT(TO SCROLL UP), for example:when I press on "Auto-scroll to (DIV3) onclick on me" the page scrolls to "DIV3" but then when I press to "Auto-scroll to (DIV2) onclick on me" the code should be able to let the page scrolls to "DIV2".(also note that it's fixed menu)

Do you have any more requirements? – Eli Mar 31 '13 at 15:01 — Eli, Mar 31 '13 at 15:01

Nolo · Answer 1 · 2013-03-31T16:38:44.310

You will need to do something like this:

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

@Abdallah: Scrolling can be tricky because it changes the offsets of every element in the container. The above code is not the only way to make it work, but it made sense to me after taking several guesses, i.e. try stuff and follow your intuition. — Nolo, Mar 31 '13 at 16:27
It doesn't do anything :( try it, it doesn't even scroll to anywhere. — Abdallah Barghouti, Mar 31 '13 at 23:42
It works fine in [this fiddle](http://jsfiddle.net/eLRtR/). Make sure you have `` in the `` and syntax is otherwise correct. — Nolo, Apr 03 '13 at 16:55

score 1 · Accepted Answer · answered May 25 '13 at 04:58

1

Check this:

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

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

answered May 25 '13 at 04:58

user2401856

468
4
8
22

score 0 · Answer 3 · answered May 25 '13 at 04:53

Check this out:

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


  });
});

animated autoscroll to div onclick

3 Answers3

Linked