Forcefully offset div by 100px from the top using javascript?

Question

Using the scrollto.js script to navigate from section to section using next/prev button works fine. The issue is that the navigation scrolls to the top of the browser. How do you get the "container" to be offset by 100px from the top of the browser. (because of the fixed "top-container")

(Unsuccessfully tried every method in css, and believe the answer is in javascript)

Is there a way to force an offset on a div from the top , without modifying the scrollto script?

<!-- FIXED TOP CONTAINER 100px -->
<div id="fixed-top-container">
  ...
</div>

<!-- PREVIOUS / NEXT -->
<a id="prev" href="#">
<div id="float-previous">
</div>
</a> <a id="next" href="#">
<div id="float-next">
</div>
</a>

<!-- CONTAINER -->
<div id="container">
  <!-- SECTION 1 -->
  <div class="section current" id="section-1">Height:200px</div>
  <!-- SECTION 2 -->
  <div class="section" id="section-2">Height:400px</div>
  <!-- SECTION 3 -->
  <div class="section" id="section-3">Height:800px</div>
  <!-- SECTION 4 -->
  <div class="section" id="section-4">Height:900px</div>
  <!-- SECTION 5 -->
  <div class="section" id="section-5"><span class="style1">Height</span>:1000px</div>
</div>

<!-- SCRIPT -->
<script>
$(function() {

    function scroll(direction) {

        var scroll, i,
                positions = [],
                here = $(window).scrollTop(),
                collection = $('.section');

        collection.each(function() {
            positions.push(parseInt($(this).offset()['top'],10));


        });

        for(i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
            if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
        }

        if (scroll) {
            $.scrollTo(scroll, {
                duration: 600       
            });
        }

        return false;
    }

    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));        
    });

    $(".scrolltoanchor").click(function() {
        $.scrollTo($($(this).attr("href")), {
            duration: 600
        });
        return false;
    });

});
</script>

Answer 1

Here's a working version: http://jsfiddle.net/xU5BB/5/

What I changed:

You didn't need a loop in your scroll function. All you needed was a variable to keep track of the current section, so I changed quite a bit in your scroll function. This may not have been necessary, but it's more efficient now. :)

New function:

var current = 0; // be sure to declare as global (or pass as as argument)

function scroll(direction) {
    var scroll,
        collection = $('.section');

    if (direction == 'next') { 
        if (current < collection.length - 1) {
            scroll = collection.get(current + 1);
            current++;
        }
    } else if (direction == 'prev') { 
        if (current > 0) {
            scroll = collection.get(current - 1);
            current--;
        }
    }

    if (scroll) {
        $("#container").scrollTo(scroll, {
            duration: 100   
        });
    }

    return false;
}

• I removed display: fixed; from .fixed-top-container so #container was always below it.
• I added overflow: auto; to #container to allow scrolling.
• I changed the height of #container. This will show a scroll bar in the container but I'm sure there are ways to hide it. You may not like this, but it was the only way I could get it working exactly like you want.

I think that's it. See the JSFiddle.

I've seen somewhere someone who was able to hide a scroll bar by always having the element's width a little larger than the window so the scroll bar was always off the screen. That may be something you could try.

I hope this helps. :)