jQuery Easing Plugin Not Easing?

Question

I have no idea why this isnt working for me. Maybe one of the jQuery Guru's out there can help me make this work!

From the script below you can see that i have a UL block named five that i would like to ease to there anchor(#web). When i click the menu item i do get the alert to activate so i think that part is correct.

$(function() {
$('ul.five a').bind('click',function(event){
    var $anchor = $(this);
    alert('hellooo')
    $('html, body, section').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    }, 500,'easeInOutExpo');

    event.preventDefault();
});

});

This is what one of my sections looks like in case this would help?

<section class="row divider-down" id="section1">
<header>
    <h1><img src="image/image1.png" alt="Alt"></h1>
    <p>some text</p>
</header>

Does anyone see anything that is obviously wrong here? Like i said the alert pops up but it doesnt "ease" down to the section?

And just to clarify: you are trying to scroll the page down to some `section` that is associated with the `anchor` that was clicked? Can you please provide some html for the anchors? — lbstr, Jun 22 '12 at 18:24
To be honest i copied the line scrollTop: $($anchor.attr('href')).offset().top from the example i was following... yes i am trying to scroll down the page from menu of images to a section on the site... this is the HTML for the

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

I think you were close. Two things:

Change what you are animating to $('body')
You can't use 'easeInOutExpo' unless you have jQuery UI included (see EDIT below).

Try this:

$(function() {
    $('ul.five a').bind('click',function(event){
        var $anchor = $(this);
        var $section = $($anchor.attr('href')); 
        if (!$section.length) { return; } // bail if there is no section

        $('body').stop().animate({ // only scroll the body
            scrollTop: $section.offset().top
        }, 500); // must remove 'easeInOutExpo' or include jQuery UI

        event.preventDefault();
    });
});

EDIT: FROM THE JQUERY DOCS:

Easing

The remaining parameter of .animate() is a string naming an easing function to use. An easing function specifies the speed at which the animation progresses at different points within the animation. The only easing implementations in the jQuery library are the default, called swing, and one that progresses at a constant pace, called linear. More easing functions are available with the use of plug-ins, most notably the jQuery UI suite.

So, you can't use 'easeInOutExpo' unless you have jQuery UI added on the page.

jQuery Easing Plugin Not Easing?

1 Answers1