scrollTop: 0 not working

• .scrollTop[]
• .scrollTop[ value ]

Description: Get the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element.

• • This method does not accept any arguments.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

Get the scrollTop of a paragraph.

scrollTop demo var p = $[ "p" ].first[]; $[ "p" ].last[].text[ "scrollTop:" + p.scrollTop[] ];

Demo:

Description: Set the current vertical position of the scroll bar for each of the set of matched elements.

• • A number indicating the new position to set the scroll bar to.

The vertical scroll position is the same as the number of pixels that are hidden from view above the scrollable area. Setting the scrollTop positions the vertical scroll of each matched element.

Set the scrollTop of a div.

scrollTop demo background: #ccc none repeat scroll 0 0; lalalaHello $[ "div.demo" ].scrollTop[ 300 ];

Demo:

Hello, im using what supossly is the solution for this issue, but still only works on IE and Firefox and fails in Chrome. I'm using

1. $['#imgArribaCarrito'].on["click", function [] {                $['html, body'].animate[{                        scrollTop: 810                    }, 2000];            }];

But nothing happens in Chrome....I guess there must be a conflict...but not sure what. Any ideas of possible causes?
Site is [already live] at //pranavyana.com.ar/ Thanks!

gautamx07

Well Diegolaz , Try going through what i've done here and see if you understand whats happening . 

Jsfiddle and u can implement it in your project . Also did u try debugging your code in the console ? did you add the Jquery file to ur HTML/PHP File ? .  anyways , hope the fiddle helps . 

Gautam.

Sµßhrånil∂

Normally i do it in different ways Only i show that icon when user start scrolling the page, and when user move to top i just hide it. By default my icon's display is none then i show/hide it on scroll like

1. var offset = $['body'].scrollTop[];    $[window].scroll[function[] {        if [$[this].scrollTop[] > offset] {            $['#top-btn'].fadeIn[500];        } else {            $['#top-btn'].fadeOut[500];        }

       }];

Then my click event like

1. $['#top-btn'].click[function[] {                $['html, body'].stop[].animate[{scrollTop: 0}, 500];                return false;    }];

diegolaz

Thanks all! but still no luck....I think some CSS or jQuery in the rest of the site is making this  $['html, body'] not work...so I'll try to find that....

do you know any other scrolling method diffenrent than scrollTop ?

jakecigar

You are making it very difficult to debug your page.

Acción no permitida

JΛ̊KE

jakecigar

The problem has to do with your wrappers’ CSS. It’s not the html or body that needs to scroll.

diegolaz

good point. Although in IE and Firefox works good.

Tried adding right after the body tag a div but nothing helps:

Style

2. #puntoScroll {
3. position:absolut;
4. top: 0;
5. left: 0;
6. }

Html

JS

2. $['#imgArribaCarrito'].on["click", function [] {
3. $['#puntoScroll'].animate[{
4.                         scrollTop: 0
5.                     }, 2000];
6. }];

Is that the wrong stlye css [absolut] ??

//pranavyana.com.ar/indexdebug.php

Thanks again to all!

jakecigar

Absolut is vodka.

Absolute is a CSS position.

diegolaz

LOL, quick catch, fixed it. I think I had too much vodka over the weekend :D

still no change.

jakecigar

I don’t see it. We’ve all used that kind of code a million times. I see the body is scrolling in Safari. Try removing some of your other plugins and CSS. One by one, until this simple code works.

JΛ̊KE

diegolaz

yes, I will try that way...THANKS for all the replies! will let you know if it fixed

diegolaz

Hello! me again.... I pinned out the problem, but still cannot solve it. I'm working at:

//pranavyana.com.ar/indexfix.php

that uses

in that CSS I have: [at line 2744]

1. @media only screen and [-webkit-min-device-pixel-ratio: 0] and [min-device-width: 1025px] {    html {     overflow: hidden; }    body {        position: absolute;        bottom: 0;        left: 0;        right: 0px;        top: 0;        overflow-y: auto;        overflow-x: hidden;    }    #page-content{               

       }

2. ....
3. ....
4. ...

where page-content is the ID of the div that wraps all the content... this is the default where it doesnt work on Chrome.

If I remove

1. overflow-y: auto;
   overflow-x: hidden;

from the body, the button works, but you can no longer scroll the page....

jakecigar

Next step is to make a tiny demo that exhibits the same problem.

JΛ̊KE