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
0
votes
1 answer

scrollIntoView() scroll only in div in React

I have a container with some elements (see image below), and whenever I click on one of the elements, I would like them for the user to be in the center of the container. My container where I would like to scroll to an element I am using a ref…
Benni
  • 554
  • 2
  • 8
  • 19
0
votes
1 answer

JavaScript scrollIntoView

I have question about how scrollIntoView is working, so why scrollIntoView working like this: liItems.forEach(val => { val.addEventListener('click', e => { e.preventDefault(); …
0
votes
1 answer

scollIntoView() works with onload, but not if we arrive at site via link

Consider the following code: session_start(); if (isset($_GET['anchor'])) { $_SESSION['gotoanchor'] = $_GET['anchor']; } else if (!isset($_SESSION['gotoanchor'])) { $_SESSION['gotoanchor'] = ''; } echo…
Loek van Kooten
  • 103
  • 1
  • 7
0
votes
1 answer

How to define/use "el" in function parameter (vue js)

I am VueJS beginner, so please bear with me. I need to code to scroll to id element when using “?” in URL. Same effect as this But I have follow the question with fix format, because this is my assignment. They provided these 2 functions without…
Evelyn
  • 656
  • 7
  • 29
0
votes
1 answer

scrollIntoView does not work on first load and after each refresh

I am seeing a very strange behavior in my chat. Once the chat is opened, the scroll moves only a tiny bit down only when there are images in the chat. When there is only text, it goes all the way down. Also, if I close the chat and open it again,…
DonBergen
  • 127
  • 1
  • 9
0
votes
0 answers

Can I scroll back to the top of an element in a for loop?

I am using accordions, and after I open an accordion, I use scrollIntoView to bring the window to the center of the accordion. When I close the accordion, I want to use scrollIntoView to bring the top of the windows screen to the top of the…
0
votes
0 answers

jquery how to add css style, then remove it within the same function

I am trying to create a jquery smooth scroll transition using a css styling effect. I want to accomplish by adding "scroll behavior: smooth" through jquery to the main html tag, and removing the scroll effect smooth right after so that the html tag…
Joao
  • 67
  • 8
0
votes
3 answers

Scroll onClick using React.fowardRef is not working

I would like to know how to use React refs to navigate to a specific component function App() { let CompetencesRef = React.createRef(); let ExperiencesRef = React.createRef(); let FormationRef = React.createRef(); let RecoRef =…
infodev
  • 4,673
  • 17
  • 65
  • 138
0
votes
0 answers

scrollIntoView innacurate when idle

Background I am working on creating a single page website. It is almost complete and works amazingly! But there was 1 bug I could never manage to fix. When a supported anchor (links to a section) is clicked, rather then reloading the page, I would…
cj-
  • 167
  • 1
  • 12
0
votes
1 answer

Scroll into view by className to a paragraph that is a child of a child of an element - pure JS

I want to scroll to a specific paragraph that is a child of a child of an element Below is a simplified version of my html. I want to scroll to the paragraph with the className of ticketType. There are more paragraphs in my actual code so I want to…
0
votes
1 answer

window.open and perform actions in console

In my js code, on a button click, I want to open the site in new tab and scroll to the selector's location, and highlight it. Individually, I am able to achieve it, but when I try to peace it together, the selector is not highlighting Following is…
Mahesh
  • 1,117
  • 2
  • 23
  • 42
0
votes
2 answers

The method executeScript(String, Object[]) in the type JavascriptExecutor is not applicable for the arguments (String, WebElement) error with Selenium

Below is the code: JavascriptExecutor jse = (JavascriptExecutor)driver; WebElement blueray = driver.findElement(By.xpath("Xpath ID")]")); jse.executeScript("scroll(0,250)", blueray); Below is the error: The method executeScript(String, Object[]) in…
0
votes
0 answers

Does scrollintoview work when there is less content on the page and there is no page scroll on the web page because of less content

Does scrollintoview work when the targeted element is within the page of less contents because of which page scroll does not appear on the web page Issue is my scrollintoview functionality works fine and scroll smoothly to the targeted element when…
0
votes
2 answers

Why scrollIntoView() only works with view reference?

I'm trying to use scrollIntoView() for my Angular 2 project. I have a container div with overflow that grow when data arrives to the component and I need to scroll to the bottom of the div as data arrives. If I use a button and pass the reference…
0
votes
1 answer

How to scroll to an element on a page which has a fixed header when clicked on a table row?

I have a page which has fixed header. On that page I have a table which has the functionality that when clicked on a row, the page scrolls to that element. Each table row has an id which matches the element's id. So on click, I get the element's id…
pogbamessi
  • 311
  • 3
  • 17