jQuery - ScrollTop without animation

Question

How can I use the scrolltop without an animation

This code works:

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 400);

And here are my (not working solutions):

$("#mainCt").scrollTop('+=' + offTop + 'px');                 // doesn't work
$("#mainCt").scrollTop('+='+offTop);                          // doesn't work
hhh = setTimeout(' $("#mainCt").scrollTop('+offTop+');',800); // doesn't work

DEMO
http://jsfiddle.net/DNNFF/9/

score 24 · Answer 1 · answered Apr 13 '12 at 15:27

24

Try this:

var offTop = $('#box').offset().top - 43;
$('#mainCt').scrollTop(offTop);

The scrollTop property accepts just an integer, no suffixes or units required.

answered Apr 13 '12 at 15:27

Rory McCrossan

331,213
40
305
339

Works fine here: http://jsfiddle.net/wNehJ/ Do you have any errors in your console? – Rory McCrossan Apr 13 '12 at 15:37
also when you scroll a little bit down? Edit: play with it, it does not work (i check the code on Firefox and on chrome) – user970727 Apr 13 '12 at 15:51
I think that's because there is no `#box` element in your example – Rory McCrossan Apr 13 '12 at 15:57
-> $(this).after('
content
'); – user970727 Apr 13 '12 at 16:00
Ugh, sorry. I need better glasses obviously. – Rory McCrossan Apr 13 '12 at 16:00
TBH I can't get this working either--whether using an element's ID or a number. Tried `$(window)` too :/ – cbmtrx Nov 29 '15 at 16:22

score 19 · Answer 2 · edited Jan 20 '15 at 01:05

19

Skip jQuery. Just use JavaScript:

window.scroll(0, 0);

edited Jan 20 '15 at 01:05

Nathan Tuggy

2,237
27
30
38

answered Jan 20 '15 at 00:23

Jeroen Flamman

965
6
10

chepe263 · Accepted Answer · 2012-04-17T05:33:40.727

18

maybe if you don't want an animation or anything fancy just use an anchor

<a name="top"></a>

Place it where you need to scroll

and in your function where you are calling use

document.location.href="#top";

You could also create a function to append the anchor before the element, do the document.location thing and later remove that anchor.

http://jsfiddle.net/fSrxr/1/

edited Apr 17 '12 at 05:33

answered Apr 16 '12 at 22:11

chepe263

2,774
22
38

9

This works, but how can i use jQuery ScrollTop without an animation? – user970727 Apr 18 '12 at 06:56
4

Whilst this answer "works", it messes with the browser history. $(element).scrollTop(offset) is better for the reposition without animation, and without messing with the browser history. Especially $(window).scrollTop(offset) for repositioning a jQuery UI Accordion section after the accordion has loaded. – Reuben Apr 12 '16 at 22:59

score 12 · Answer 4 · answered Apr 13 '12 at 15:28

12

http://api.jquery.com/scrollTop/

$(window).scrollTop(offTop)

answered Apr 13 '12 at 15:28

sod

3,804
5
22
28

if mainCt is a layer with a scrollbar (overflow:auto) then you can use it on mainCt. If you want to scroll the browser viewport, then you have to use window. – sod Apr 13 '12 at 15:36
right, mainCt is a div with overflow-x: hidden; overflow-y: scroll; – user970727 Apr 13 '12 at 15:37

Mrigesh Raj Shrestha · Answer 5 · 2016-04-27T04:16:13.713

3

Why not use it with less duration. I fiddled it and it had no animation. SInce there will be no time to see the animation, there will be no animation at all.

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').animate({scrollTop: '+=' + offTop + 'px'}, 50); //50 added here as duartion

edited Apr 27 '16 at 04:16

answered Apr 18 '12 at 04:25

Mrigesh Raj Shrestha

580
3
16

1

Doesn't answer the question. – igorpavlov Nov 17 '15 at 18:13

score 1 · Answer 6 · answered Apr 13 '12 at 15:29

1

Can't you play with the duration ?

var offTop = $('#box').offset().top;
offTop  = offTop-43;
$('#mainCt').delay('800').animate({scrollTop: '+=' + offTop + 'px'}, 1);

answered Apr 13 '12 at 15:29

Mr_DeLeTeD

825
1
6
18

1

I can, but this solution is a little bit dirty :/ – user970727 Apr 13 '12 at 15:35
Doesn't answer the question. – igorpavlov Nov 17 '15 at 18:13

score 0 · Answer 7 · answered Dec 22 '21 at 09:16

Demo with keep position on refresh page using jQuery:

//------KEEP SCROLL POSITION
        $(window).scroll(function () {
            sessionStorage.scrollTop = $(this).scrollTop();
        });
        $(document).ready(function () {
            if (sessionStorage.scrollTop != "undefined") {
                setTimeout(() => window.scrollTo({
                    top: sessionStorage.scrollTop,
                    left: 0,
                    behavior: 'auto'
                }), 5);
            }
        });

Lance Nacabuan · Answer 8 · 2022-06-25T02:22:39.787

0

[EDITED] This code will reset the view to its original starting position with its height equal to the device height temporarily excluding and disabling scroll and overflow. In short, it has the same function as scrolling to top without animation.

$('#yourButton').on('click', function(){
    $('html, body').css({ overflow: 'hidden', height: '100%' });
});

edited Jun 25 '22 at 02:22

answered Jun 10 '22 at 04:14

Lance Nacabuan

1
2

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jun 12 '22 at 13:35

score -1 · Answer 9 · answered May 09 '18 at 06:11

-1

var offTop = $('#box').offset().top;
$(window).scrollTop(parseInt(offTop))

answered May 09 '18 at 06:11

jQuery - ScrollTop without animation

9 Answers9

Linked

Related