Question

I have this button, when I click it, I want to add a class to a DIV with an ID. After that, it should scroll to the bottom of the page.

I have this currently:

  $("#signUp").click(function() {
$("#overlay").addClass(".overlay");       
 $('html, body').animate({scrollBottom:0}); 

    });

The HTML:

<div class="big-signup"> <a href="javascript: void(0)" id="signUp"><button>Sign up now. It's <span>FREE &raquo;</span></button></a><br /> <br />

And the css:

#overlay{
    height:100%;
    width:100%;
    display:none;
}
.overlay{
    background-color:#000;
    opacity:0.5;
}

Currently I can’t get the code to do anything. Nothing happens when I click the button..

UPDATE: jsFiddle: http://jsfiddle.net/P23P5/

Thanks in advance.

Answer 1

The addClass method is expecting the name of the class without any dot:

$("#overlay").addClass("overlay");

The code that usually I use to scroll the page to a specific position is:

var target = $(window).height(); // Y value
var animationSelector='html:not(:animated)';

// Fix for Safari
if($.browser.safari) {animationSelector='body:not(:animated)';}
// Animate
$(animationSelector).animate({scrollTop: target}, 400, 'swing');