Stack Overflow
Stack Overflow

Questions tagged [js-scrollintoview]

The Element.scrollIntoView() method scrolls the current element into the visible area of the browser window.

Syntax

element.scrollIntoView(); // Equivalent to element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean arguments
element.scrollIntoView(scrollIntoViewOptions); // Object argument

MDN

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Can I use?

desktop

mobile

A good answer on SO

Demo

https://jsbin.com/cuweho

162 questions
672
votes
31 answers

Scroll Automatically to the Bottom of the Page

I have a list of questions. When I click on the first question, it should automatically take me to a specific element at the bottom of the page. How can I do this with jQuery?
jat
  • 6,940
  • 3
  • 14
  • 10
139
votes
10 answers

Javascript scrollIntoView() middle alignment?

Javascript .scrollIntoView(boolean) provide only two alignment option. top bottom What if I want to scroll the view such that. I want to bring particular element somewhere in middle of the page?
Dhruv
  • 10,291
  • 18
  • 77
  • 126
139
votes
14 answers

JavaScript scrollIntoView smooth scroll and offset

I have this code for my website: function clickMe() { var element = document.getElementById('about'); element.scrollIntoView({ block: 'start', behavior: 'smooth', }); } This works pretty nice but I have a fixed header so when the code…
Tim Wijma
  • 1,526
  • 2
  • 9
  • 12
84
votes
7 answers

Does scrollIntoView work in all browsers?

Does scrollIntoView() work in all browsers? If not is there a jQuery alternative?
9-bits
  • 10,395
  • 21
  • 61
  • 83
69
votes
10 answers

How to know scroll to element is done in Javascript?

I am using Javascript method Element.scrollIntoView() https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView Is there any way I can get to know when the scroll is over. Say there was an animation, or I have set {behavior: smooth}. I…
Sushant Gupta
  • 8,980
  • 5
  • 43
  • 48
56
votes
8 answers

scrollintoview animation

My code is at http://jsfiddle.net/mannagod/QT3v5/7/. The JS is: function delay() { var INTENDED_MONTH = 7 //August // INTENDED_MONTH is zero-relative now = new Date().getDate(), rows = document.getElementById('scripture').rows; if…
Ted Lederer
  • 567
  • 1
  • 5
  • 9
43
votes
1 answer

scrollIntoView block vs inline

I noticed scrollIntoView has some new options since last I looked. Namely, block and inline. What's the difference between these two? I'm guessing {block: "start"} will align the top of the element with the top of the page, but I'm not sure how that…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
42
votes
2 answers

Using document.querySelector in React? Should I use refs instead? How?

I am building a carousel right now, in React. To scroll to the individual slides I am using document.querySelector like so : useEffect(() => { document.querySelector(`#slide-${activeSlide}`).scrollIntoView({ behavior: 'smooth', …
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
24
votes
2 answers

Google Chrome: Simultaneously 'smooth' scrollIntoView() with more elements doesn't work

In Google Chrome, element.scrollIntoView() with behavior: 'smooth' doesn't work on multiple containers at the same time. As soon as smooth scrolling is triggered on one container, the second container stops scrolling. In Firefox, this problem…
alice.3000
  • 241
  • 2
  • 5
14
votes
2 answers

What is the difference between the different scroll options?

I have tried a few ways of adding scrolling to tables, but just one of them works correctly. What is the difference between them? First: JavascriptExecutor js = (JavascriptExecutor) driver; js.executeScript("arguments[0].scrollIntoView();",…
shlomi
  • 181
  • 1
  • 1
  • 7
11
votes
5 answers

Is it possible to test for scrollIntoView browser compatibility?

I am looking for a way to do a real-time test for scrollIntoView functionality of my user's browser. This is not a "caniuse" check; rather I want to have graceful degradation. I am using jQuery, and would like to use a preventDefault() if…
Sablefoste
  • 4,032
  • 3
  • 37
  • 58
9
votes
1 answer

Scroll element into view within container, but not in browser window

I have a container with tags that line up horizontally. See example below. The container has overflow:hidden and white-space:nowrap, so the tags can potentially go out to the right forever. I'd like to programatically horizontal scroll to a given…
Matt
  • 23,363
  • 39
  • 111
  • 152
9
votes
1 answer

How to get consistent ScrollIntoView behavior

So I have been using ScrollIntoView() to jump to anchors in a react component as part of a web app. For small pages, it works fine, goes to the right spot and behaves as one would expect. I have one larger page where the behavior is strange. On…
suntruth
  • 101
  • 1
  • 4
8
votes
2 answers

ref scrollIntoView does not work with behavior smooth on react

I am creating a component that will hold a dynamic list of elements and for styling reasons, I need to keep the title for each section in a sticky nav menu. As the user scrolls up and down the list of sections I need to apply styling rules and also…
Gareth Townsend
  • 119
  • 2
  • 8
8
votes
5 answers

scrollIntoView() not working for horizontal scroll (Selenium)

i want to scroll right to a column. This is what i tried: ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element); This works for vertical scrolling but not for horizontal.
Success Shrestha
  • 433
  • 1
  • 4
  • 19
1
2 3
…
10 11