CODEWITHSUNDEEP
jqueryhtmlcss
invictus
invictus

Reputation: 825

What could scrollTop() keep off from working?

I need to scroll to point on screen. That's my Code

$('#MainNavigation .link a').click(function() {
    alert('start');
    var linkClicked = $(this).attr('data-opsection');
    var destination = parseInt( $('section[data-opsection="' + linkClicked +'"]').position().top );
    $("html").animate({scrollTop: destination}, 500 );
    alert('done');
});

both alerts are displayed, all variable values are correct, the consol logs no errors but the page doesn't scroll.

here's my markup, perhapse someone knows a solution

<div id="ContentContainer">
    ...
    ...
    <section id="SID-20" data-opsection="commerce" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-22" data-opsection="workout" class="onepage-section cf">
        ...
    </section> 

    <section id="SID-21" data-opsection="ueber-das-projekt" class="onepage-section wrapper cf">
        ...
    </section> 

    <section id="SID-23" data-opsection="kontakt" class="onepage-section cf">
        ...
    </section> 
    ...
    ...
</div>

Here's a part of the CSS, I'm using Pushy so overflow-x: hidden is required. But even without, it doesn't work.

html,
body {
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* disable webkit tap highlight */
    height: 100%; /* fixes focus scrolling in Safari (OS X) */
    font-family: 'Titillium Web', sans-serif;
    font-weight: 200;
    font-size: 18px;
    color: #879299; /*#465762;*/
    background: #465762;
}

#ContentContainer {
    position: relative;
    background: #ffffff;
}

And here comes the menu markup

<nav id="MainNavigation" class="pushy pushy-open">
    <ul>
        ...
        <li class="link ">
            <a href="javascript:void(0)" data-opsection="ueber-das-projekt">Über das Projekt</a>
        </li>

        <li class="link last">
            <a href="javascript:void(0)" data-opsection="kontakt">Kontakt</a>
        </li>
        ...
    </ul>
</nav>

Upvotes: 0

Views: 109

Answers (2)

sifriday
sifriday

Reputation: 4462

Your JS is fine, it looks like how I would do it and should work OK!

Here is a fiddle showing it working correctly:

http://jsfiddle.net/sifriday/8euussh7/

I think, looking at your markup, that what is happening is that the body and html are set to height: 100% but if #ContentContainer is higher than the viewport height, then your html height is equal to whatever is the height of #ContentContainer, so in other words there's nothing to actually scroll!

In otherwords, unfortunately, I don;t think you can have the body set to overflow: hidden and refuse to fix the height of #ContentContainer - nothing will scroll!

Solution 1 - fix ContentContainer

If you set the height of #ContentContainer to be that of the viewport:

$("#ContentContainer").css({height: ($(window).height()-80) + "px"});

and add overflow: scroll to your CSS for #ContentContainer:

#ContentContainer {
    position: relative;
    background: #ffffff;
    overflow: scroll
}

does that work for you? Demo of this here:

http://jsfiddle.net/sifriday/8euussh7/3/

Update: better demo, with your nav markup: http://jsfiddle.net/sifriday/8euussh7/4/

Solution 2 - allow the body to scroll

Remove overflow: hidden from the body and you can scroll the body, as shown here:

http://jsfiddle.net/sifriday/8euussh7/5/

Solution 3 - an extra wrapper

If you can get an extra wrapper div into your markup just inside the body then we can use that to handle the scrolling. The body can keep the overflow-x:hidden and the #ContentContainer does not need to be sized.

http://jsfiddle.net/sifriday/8euussh7/7/

Upvotes: 1

mmeasor
mmeasor

Reputation: 458

Here is how it works for me

$("html, body").animate({ scrollTop: $("#[NAME YOUR ELEMENT]").offset().top }, 500);

We have that running in an mvc 4 site

Upvotes: 0

Related Questions