jQuery .animate({scrollTop: ... }) not working

Question

I have single .html file

I have <ul> menu and <li>'s have data-id attributes. I have several content items, which has same id's as menu <li>'s data-id's. By default most of content items are display:none; first page content is display:block;

<ul>
    <li class="menuLink" id="onepage" data-id="one"></li>
    <li class="menuLink" id="twopage" data-id="two"></li>
    <li class="menuLink" id="threepage" data-id="three"></li>
    <li class="menuLink" id="fourpage" data-id="four"></li>
</ul>
<div class="content">
    <div id="one" class="page">...</div>
    <div id="two" class="page">...</div>
    <div id="three" class="page">...</div>
    <div id="four" class="page">...</div>
</div>

This script should appear and disappear content items by clicking on menu items. This works very well.

$('li.menuLink').click(function () {
    var elem = $(this);
    if (elem.hasClass('active')) {
    } else {
        $('li.active').removeClass('active');
        elem.addClass('active');
        $('#' + elem.attr('data-id')).prependTo($('.content'));
        var existing = $('.page:visible');
        (existing) ? existing.fadeOut(1) : '';
        $('#' + elem.attr('data-id')).delay(10).fadeIn(400);

        if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }
    }
});

If .body-wrapper width is less then 700 (mobile device), this script should also scroll down to content, but this function isn't working at all. Once you refresh page and click FIRST menu element, it works once. after that... nothing.

if (($('.body-wrapper').width()) <= 700) {
            $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
        }

EDIT: http://jsfiddle.net/wBUS7/2/

Have a look at http://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrolltop-with-jquery. Might help you. — putvande, Jul 05 '13 at 10:25
@putvande this is what already use OP, or i missing something?! — A. Wolff, Jul 05 '13 at 10:26

Jaimin Sutariya · Answer 1 · 2013-07-08T12:45:49.810

0

You should use each() function. Like

$('li.menuLink').each(function(){
    $(this).click(function () {
        var elem = $(this);
        if (elem.hasClass('active')) {
        } else {
            $('li.active').removeClass('active');
            elem.addClass('active');
            $('#' + elem.attr('data-id')).prependTo($('.content'));
            var existing = $('.page:visible');
            (existing) ? existing.fadeOut(1) : '';
            $('#' + elem.attr('data-id')).fadeIn(400);

            if (($('.body-wrapper').width()) <= 700) {
                $('html,body').animate({scrollTop: $('#' + elem.attr('data-id')).offset().top}, 500);
            }
        }
    });
});

edited Jul 08 '13 at 12:45

answered Jul 05 '13 at 10:44

Jaimin Sutariya

252
1
12
31

You said it was working for the first time. and after that nothing happens. So I have added each() function which will work for each li in your list. – Jaimin Sutariya Jul 06 '13 at 07:32
Yes, i understand, what `each()` does, but see yourself: http://jsfiddle.net/wBUS7/3/ It's not working. Make the result window width less then 700px and click run. After that only clicking 'FIRST' works and only once. – mLeht Jul 06 '13 at 10:30
found the solution. just remove dealay(10) from line $('#' + elem.attr('data-id')).delay(10).fadeIn(400); – Jaimin Sutariya Jul 06 '13 at 10:57

jQuery .animate({scrollTop: ... }) not working

1 Answers1