Scrolling to Div IDs with Jquery

Question

Due to css properties my scrolling to div tags has too much margin-top. So I see jquery as the best solution to get this fixed.

I'm not sure why this isn't working, I'm very new to Js and Jquery. Any help us greatly appreciated.

Here is a quick look at Js. I found that when your div ids are in containers to change the ('html, body') to ('container)

Here is my jsfiddle

     jQuery(document).ready(function($){
var prevScrollTop = 0;
var $scrollDiv    = jQuery('div#container');
var $currentDiv   = $scrollDiv.children('div:first-child');

var $sectionid    = 1;
var $numsections  = 5;

$scrollDiv.scroll(function(eventObj)
{
    var curScrollTop = $scrollDiv.scrollTop();
    if (prevScrollTop < curScrollTop)
    {
    // Scrolling down:
        if ($sectionid+1 > $numsections) {
            console.log("End Panel Reached");
        }
        else {
            $currentDiv = $currentDiv.next().scrollTo();
            console.log("down");
            console.log($currentDiv);
            $sectionid=$sectionid+1;
            console.log($currentDiv.attr('id'));
            var divid =$currentDiv.attr('id');
            jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
            }
    }
    else if (prevScrollTop > curScrollTop)
    {
    // Scrolling up:
        if ($sectionid-1 == 0) {
            console.log("Top Panel Reached");
        }
        else {
            $currentDiv = $currentDiv.prev().scrollTo();
            console.log("up");
            console.log($currentDiv);
            $sectionid=$sectionid-1;
            var divid =$currentDiv.attr('id');
            jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

            }
    }
    prevScrollTop = curScrollTop;
});
});

Check : http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — eric.itzhak, May 05 '13 at 13:09
Please trim down your code to present the relevant parts, it would help people trying to answer your question. — Vimal Stan, May 05 '13 at 13:11

SoonDead · Accepted Answer · 2013-05-05T14:27:56.707

I'm not entirely sure what you want but scrolling to a <div> with jQuery is simpler than your code.

For example this code replaces the automatic jumping behaviour of anchors with smoother scrolling:

$(document).ready(function(e){
    $('.side-nav').on('click', 'a', function (e) {
        var $this = $(this);
        var top = $($this.attr('href')).offset().top;

        $('html, body').stop().animate({
            scrollTop: top
        }, 'slow');

        e.preventDefault();
    });
});

You can of course adjust the top variable by adding or removing from it like:

var top = $($this.attr('href')).offset().top - 10;

I have also made a fiddle from it (on top of your HTML): http://jsfiddle.net/Qn5hG/8/

If this doesn't help you or your question is something different, please clarify it!

EDIT:

Problems with your fiddle:

jQuery is not referenced
You don't need jQuery(document).ready() if the jQuery framework is selected with "onLoad". Remove the first and last line of your JavaScript.
There is no div#container in your HTML so it's no reason to check where it is scrolled. And the scroll event will never fire on it.
Your HTML is invalid. There are a lot of unclosed elements and random tags at the end. Make sure it's valid.
It's very hard to figure out what your fiddle is supposed to do.

that works beautifully. I'm toying with the offset now, I still have a couple items off. Thank you so much! — nil, May 05 '13 at 15:15
@Russell, why the unaccept? Is there a new problem with this answer making it invalid? — SoonDead, Jul 07 '15 at 15:29

Scrolling to Div IDs with Jquery

1 Answers1