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/

Rory McCrossan · Accepted Answer · 2012-04-13 15:27:25Z

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, 2012 at 15:27

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Rory McCrossan Over a year ago

Works fine here: jsfiddle.net/wNehJ Do you have any errors in your console?

user970727 Over a year ago

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)

Rory McCrossan Over a year ago

I think that's because there is no #box element in your example

user970727 Over a year ago

-> $(this).after('<div id="box">content</div>');

Rory McCrossan Over a year ago

Ugh, sorry. I need better glasses obviously.

|

Nathan Tuggy · Accepted Answer · 2015-01-20 01:05:24Z

19

Skip jQuery. Just use JavaScript:

window.scroll(0, 0);

edited Jan 20, 2015 at 1:05

Nathan Tuggy

2,23727 gold badges33 silver badges38 bronze badges

answered Jan 20, 2015 at 0:23

Jeroen Flamman

9556 silver badges10 bronze badges

Comments

chepe263 · Accepted Answer · 2012-04-17 05:33:40Z

17

+50

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, 2012 at 5:33

answered Apr 16, 2012 at 22:11

chepe263

2,81224 silver badges39 bronze badges

3 Comments

user970727 Over a year ago

This works, but how can i use jQuery ScrollTop without an animation?

Reuben Over a year ago

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.

Lenka Pitonakova Over a year ago

This assumes that you are going name all your elements. Doesn't work as a general solution when elements are selected dynamically. Also doesn't work when you already have legit sections of your page named and you thus need to use the hashed part of the location

sod · Accepted Answer · 2012-04-13 15:28:12Z

12

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

$(window).scrollTop(offTop)

answered Apr 13, 2012 at 15:28

sod

3,9886 gold badges25 silver badges28 bronze badges

2 Comments

sod Over a year ago

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.

user970727 Over a year ago

right, mainCt is a div with overflow-x: hidden; overflow-y: scroll;

Mrigesh Raj Shrestha · Accepted Answer · 2016-04-27 04:16:13Z

4

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, 2016 at 4:16

answered Apr 18, 2012 at 4:25

Mrigesh Raj Shrestha

6204 silver badges16 bronze badges

2 Comments

igorpavlov Over a year ago

Doesn't answer the question.

Lenka Pitonakova Over a year ago

This is, in my opinion, the most elegant solution. I'd actually just set the duration to 1.

Mr_DeLeTeD · Accepted Answer · 2012-04-13 15:29:21Z

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, 2012 at 15:29

Mr_DeLeTeD

8461 gold badge6 silver badges19 bronze badges

2 Comments

user970727 Over a year ago

I can, but this solution is a little bit dirty :/

igorpavlov Over a year ago

Doesn't answer the question.

O Thạnh Ldt · Accepted Answer · 2021-12-22 09:16:53Z

0

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

answered Dec 22, 2021 at 9:16

O Thạnh Ldt

1,33113 silver badges12 bronze badges

Comments

Lance Nacabuan · Accepted Answer · 2022-06-25 02:22:39Z

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, 2022 at 2:22

answered Jun 10, 2022 at 4:14

Lance Nacabuan

12 bronze badges

1 Comment

Tyler2P Over a year ago

Your answer could be improved by adding more information on what the code does and how it helps the OP.

user9717345 · Accepted Answer · 2018-05-09 06:11:46Z

-1

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

answered May 9, 2018 at 6:11

user9717345

Collectives™ on Stack Overflow

jQuery - ScrollTop without animation

9 Answers 9

6 Comments

Comments

3 Comments

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

6 Comments

Comments

3 Comments

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related