CODEWITHSUNDEEP
javascriptjqueryscrolltop
no.
no.

Reputation: 2376

Javascript/jQuery scrollTop issue

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?

Upvotes: 0

Views: 515

Answers (3)

Jose Vega
Jose Vega

Reputation: 10258

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');
});

Upvotes: 1

Stephen Watkins
Stephen Watkins

Reputation: 25775

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

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

Upvotes: 1

Daniel Moses
Daniel Moses

Reputation: 5858

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/

Upvotes: 0

Related Questions