Javascript/jQuery scrollTop issue

Question

I've re-created a simple version of what I'm trying to do here (jsFiddle)

The header should stay where it is, and as you scroll down, when you click the header div it should scroll back up to the top, which it does. But if you focus on the input, or click the "logo", the scroll should stay where it is.

With the first method I've tried is by using jQuery's .css and setting the input/logo's z-index as higher than the header, then getting the current scroll and keeping it at that position.

This sort of works, but once you click the input or logo, the header scroll no longer works.

I've also tried changing the logo/input jQuery to .animate with a slow speed, and it stays static for a couple seconds and then scrolls to the top even though I've not set it to do so. Here is the second example - jsFiddle

Doing it with the second example however doesn't stop the other function from working.

Is there any reason for this behaviour that I'm missing?

Stephen Watkins · Accepted Answer · 2011-11-22 20:59:03Z

1

You can prevent the click event from propagating to the header.

$("#logo, #input").click(function(e) {
    e.stopPropagation();
});

answered Nov 22, 2011 at 20:59

Stephen Watkins

25.9k17 gold badges71 silver badges102 bronze badges

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

Comments

Jose Vega · Accepted Answer · 2011-11-22 21:02:33Z

1

Check out this interesting article about event order, all you have to do is stop propagation. Here your modified Fiddle

$("#logo, #input").click(function(e) {
    e.stopPropagation();
    var y = window.scrollY;

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

answered Nov 22, 2011 at 21:02

Jose Vega

10.3k7 gold badges43 silver badges58 bronze badges

Comments

Daniel Moses · Accepted Answer · 2011-11-22 20:57:59Z

0

All you need to do is stop the propegation of the event. To do this you return false from your click function.

$("#logo, #input").click(function() {
    return false;  // Add this line
});

Here is your fiddle updated: http://jsfiddle.net/BRnvT/

answered Nov 22, 2011 at 20:57

Daniel Moses

5,86828 silver badges39 bronze badges

3 Comments

Stephen Watkins Over a year ago

I believe this will also render all clicks within the container useless as well, which may pose a problem for the OP.

Daniel Moses Over a year ago

Steve's answer is more appropriate. My solution also adds e.preventDefault() which is not ideal if the logo was a link. You can read more at api.jquery.com/event.preventDefault api.jquery.com/event.stopPropagation

no. Over a year ago

This does work but like you've pointed out the logo is a link in the real version which would render it useless for navigation, so stopPropagation is more appropriate for what I want, but still thank you for the answer :)

Collectives™ on Stack Overflow

Javascript/jQuery scrollTop issue

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related