jQuery Multiple Functions on 1 Button

Question

So I have one button I'm trying to get multiple functions to work with. On page load the above div is hidden, once the button is clicked it will make the div visible and scroll to the top. I can get both working separately but not together. Can someone point out what I'm doing wrong?

$(function () {
    $("#work").hide();
    $(".button").bind("click", function () {
        $("#work").show();
    });
    $(".button").click(function () {
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

UPDATE 1:

Added a fiddle: http://jsfiddle.net/5qQJN/1/

UPDATE 2:

So it manages to work but only after you click it once. Say you click it, jumps to the top, you scroll down click again and then it will scroll with animation.. so does that mean I need a window load?

j08691 · Accepted Answer · 2013-03-13 21:00:04Z

3

$(function () {
    $("#work").hide();
    $(".button").click(function () {
        $("#work").show();
        $('html, body').animate({
            scrollTop: $("#work").offset().top
        }, 2000);
    });
});

Combining them should work since nothing appears to be loading dynamically.

answered Mar 13, 2013 at 21:00

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Adrian Over a year ago

^ this -- I was wondering myself why two click handlers are necessary at all, it may be an oversimplification in the OP's example code.

Sneezy Over a year ago

Thanks for the reply and the edit. However still no dice, when I click the button the div will appear and it will scroll to the top but with no animation, just a straight jump.

j08691 Over a year ago

Can you update your question with your HTML, and if possible a jsFiddle that illustrates the problem.

Sneezy Over a year ago

So it manages to work but only after you click it once. Say you click it, jumps to the top, you scroll down click again and then it will scroll with animation.. so does that mean I need a window load?

Andrew · Accepted Answer · 2013-03-14 13:13:23Z

0

I made a Fiddle for you: http://jsfiddle.net/FaC4r/

Looks like it's working there. It would help though if you provided your HTML.

THE DIV IS HIDDEN UP HERE - SCROLL DOWN FOR BUTTON
<div id="work"></div>

<div id="spacer"></div>

<input type="button" class="button" value="CLICK ME TO SHOW 'WORK' AND SCROLL UP TO IT">

[UPDATE BASED ON COMMENTS]

I edited the Fiddle for you with your new HTML: http://jsfiddle.net/FaC4r/2/

Seems like your CSS is specifying a work div with padding of 0, that, combined with the fact that there isn't anything in the div, means that it's invisible! You can see in the fiddle above, that I use 2em in padding in order to ensure that I'm actually seeing the div grow and expand.

I'd say - and this is true for basically everything in your programming career - use the working example as a base and incrementally add your specific requirements. Test early and often. Add one thing and test to make sure it did what you expected. Once you build up a certain comfort level, you'll be able to extend that iterative cycle.

Hope that helps! :)

edited Mar 14, 2013 at 13:13

answered Mar 13, 2013 at 21:07

Andrew

5051 gold badge6 silver badges19 bronze badges

1 Comment

Sneezy Over a year ago

Appreciate the help.. It's strange I feel like it should be working but for some reason it isn't. I threw up a fiddle if you notice anything lemme know, I'm still fairly new at code. Thanks again.

Collectives™ on Stack Overflow

jQuery Multiple Functions on 1 Button

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related