I have a page where a scroll bar containing table rows with divs in them is dynamically generated from the database. Each table row acts like a link, sort of like you'd see on a YouTube playlist next to the video player.
When a user visits the page, the option they are on is supposed to go to the top of the scrolling div. This functionality is working. The issue is that it goes just a tad too far. Like the option they are on is about 10px too high. So, the page is visited, the url is used to identify which option was selected and then scrolls that option to the top of the scrolling div. Note: This is not the scroll bar for the window, it is a div with a scrollbar.
I am using this code to make it move the selected option to the top of the div:
var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.scrollIntoView(true);
It moves it to the top of the div but about 10 pixels too far up. Anyone know how to fix that?
This question is related to
javascript
dom
scroll
This solution belongs to @Arseniy-II, I have just simplified it into a function.
function _scrollTo(selector, yOffset = 0){
const el = document.querySelector(selector);
const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
}
Usage (you can open up the console right here in StackOverflow and test it out):
_scrollTo('#question-header', 0);
I'm currently using this in production and it is working just fine.
Found a workaround solution. Say that you want to scroll to an div, Element here for example, and you want to have a spacing of 20px above it. Set the ref to a created div above it:
<div ref={yourRef} style={{position: 'relative', bottom: 20}}/>
<Element />
Doing so will create this spacing that you want.
If you have a header, create an empty div as well behind the header and assign to it a height equal to the height of the header and reference it.
I add this css tips for those who not resolved this issue with solutions above :
#myDiv::before {
display: block;
content: " ";
margin-top: -90px; // adjust this with your header height
height: 90px; // adjust this with your header height
visibility: hidden;
}
Get correct y
coordinate and use window.scrollTo({top: y, behavior: 'smooth'})
const id = 'profilePhoto';
const yOffset = -10;
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
window.scrollTo({top: y, behavior: 'smooth'});
I've taken the wonderful solution of Steve Banton and wrote a function that makes it more convenient to use. It'd be easier just to use window.scroll()
or even window.scrollBy()
, as I've tried before, but these two have some problems:
Just copy it and mess up with it how ever you want.
import smoothscroll from 'smoothscroll-polyfill';
smoothscroll.polyfill();
const prepareSmoothScroll = linkEl => {
const EXTRA_OFFSET = 0;
const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
const blockOption = linkEl.dataset.smoothScrollBlock || 'start';
if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
const anchorEl = document.createElement('div');
destinationEl.setAttribute('style', 'position: relative;');
anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);
destinationEl.appendChild(anchorEl);
linkEl.addEventListener('click', () => {
anchorEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
if (blockOption === 'center' || !EXTRA_OFFSET) {
linkEl.addEventListener('click', () => {
destinationEl.scrollIntoView({
block: blockOption,
behavior: 'smooth',
});
});
}
};
export const activateSmoothScroll = () => {
const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];
linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};
To make a link element just add the following data attribute:
data-smooth-scroll-to="element-id"
Also you can set another attribute as an addtion
data-smooth-scroll-block="center"
It represents the block
option of the scrollIntoView()
function. By default, it's start
. Read more on MDN.
Adjust the smoothScroll function to your needs.
For example, if you have some fixed header (or I call it with the word masthead
) you can do something like this:
const mastheadEl = document.querySelector(someMastheadSelector);
// and add it's height to the EXTRA_OFFSET variable
const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;
If you don't have such a case, then just delete it, why not :-D.
Another solution is to use "offsetTop", like this:
var elementPosition = document.getElementById('id').offsetTop;
window.scrollTo({
top: elementPosition - 10, //add your necessary value
behavior: "smooth" //Smooth transition to roll
});
Another way do do this is to position your anchors exactly where you want on the page rather than relying on scrolling by offset. I find it allows better control for each element (eg. if you want a different offset for certain elements), and may also be more resistant to browser API changes/differences.
<div id="title-element" style="position: relative;">
<div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>
Now the offset is specified as -100px relative to the element. Create a function to create this anchor for code reuse, or if you are using a modern JS framework such as React do this by creating a component that renders your anchor, and pass in the anchor name and alignment for each element, which may or may not be the same.
Then just use :
const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
For smooth scrolling with an offset of 100px.
For an element in a table row, use JQuery to get the row above the one you want, and simply scroll to that row instead.
Suppose I have multiple rows in a table, some of which should be reviewed by and admin. Each row requiring review has both and up and a down arrow to take you to the previous or next item for review.
Here's a complete example that should just run if you make a new HTML document in notepad and save it. There's extra code to detect the top and bottom of our items for review so we don't throw any errors.
<html>
<head>
<title>Scrolling Into View</title>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<style>
div.scroll { height: 6em; width: 20em; overflow: auto; }
thead th { position: sticky; top: -1px; background: #fff; }
.up, .down { cursor: pointer; }
.up:hover, .down:hover { color: blue; text-decoration:underline; }
</style>
</head>
<body>
<div class='scroll'>
<table border='1'>
<thead>
<tr>
<th>Review</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr id='row_1'>
<th></th>
<td>Row 1 (OK)</td>
</tr>
<tr id='row_2'>
<th></th>
<td>Row 2 (OK)</td>
</tr>
<tr id='row_3'>
<th id='jump_1'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 3 (REVIEW)</td>
</tr>
<tr id='row_4'>
<th></th>
<td>Row 4 (OK)</td>
</tr>
<tr id='row_5'>
<th id='jump_2'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 5 (REVIEW)</td>
</tr>
<tr id='row_6'>
<th></th>
<td>Row 6 (OK)</td>
</tr>
<tr id='row_7'>
<th></th>
<td>Row 7 (OK)</td>
</tr>
<tr id='row_8'>
<th id='jump_3'><span class='up'>UP</span> <span class='down'>DN</span></th>
<td>Row 8 (REVIEW)</td>
</tr>
<tr id='row_9'>
<th></th>
<td>Row 9 (OK)</td>
</tr>
<tr id='row_10'>
<th></th>
<td>Row 10 (OK)</td>
</tr>
</tbody>
</table>
</div>
<script>
$(document).ready( function() {
$('.up').on('click', function() {
var id = parseInt($(this).parent().attr('id').split('_')[1]);
if (id>1) {
var row_id = $('#jump_' + (id - 1)).parent().attr('id').split('_')[1];
document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
} else {
alert('At first');
}
});
$('.down').on('click', function() {
var id = parseInt($(this).parent().attr('id').split('_')[1]);
if ($('#jump_' + (id + 1)).length) {
var row_id = $('#jump_' + (id + 1)).parent().attr('id').split('_')[1];
document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
} else {
alert('At last');
}
});
});
</script>
</body>
</html>
Simple solution for scrolling specific element down
const element = document.getElementById("element-with-scroll");
element.scrollTop = element.scrollHeight - 10;
Assuming you want to scroll to the divs that are all at the same level in DOM and have class name "scroll-with-offset", then this CSS will solve the issue:
.scroll-with-offset {
padding-top: 100px;
margin-bottom: -100px;
}
The offset from the top of the page is 100px. It will only work as intended with block: 'start':
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
What's happening is that the divs' top point is at the normal location but their inner contents start 100px below the normal location. That's what padding-top:100px is for. margin-bottom: -100px is to offset the below div's extra margin. To make the solution complete also add this CSS to offset the margins/paddings for the top-most and bottom-most divs:
.top-div {
padding-top: 0;
}
.bottom-div {
margin-bottom: 0;
}
Building on an earlier answer, I am doing this in an Angular5 project.
Started with:
// el.scrollIntoView(true);
el.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
window.scrollBy(0, -10);
But this gave some problems and needed to setTimeout for the scrollBy() like this:
//window.scrollBy(0,-10);
setTimeout(() => {
window.scrollBy(0,-10)
}, 500);
And it works perfectly in MSIE11 and Chrome 68+. I have not tested in FF. 500ms was the shortest delay I would venture. Going lower sometimes failed as the smooth scroll had not yet completed. Adjust as required for your own project.
+1 to Fred727 for this simple but effective solution.
Based on the answer of Arseniy-II: I had the Use-Case where the scrolling entity was not window itself but a inner Template (in this case a div). In this scenario we need to set an ID for the scrolling container and get it via getElementById
to use its scrolling function:
<div class="scroll-container" id="app-content">
...
</div>
const yOffsetForScroll = -100
const y = document.getElementById(this.idToScroll).getBoundingClientRect().top;
const main = document.getElementById('app-content');
main.scrollTo({
top: y + main.scrollTop + yOffsetForScroll,
behavior: 'smooth'
});
Leaving it here in case someone faces a similar situation!
I've got this and it works brilliantly for me:
// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
behavior: 'smooth',
block: 'start'});
setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}
Hope it helps.
My main idea is creating a tempDiv above the view which we want to scroll to. It work well without lagging in my project.
scrollToView = (element, offset) => {
var rect = element.getBoundingClientRect();
var targetY = rect.y + window.scrollY - offset;
var tempDiv;
tempDiv = document.getElementById("tempDiv");
if (tempDiv) {
tempDiv.style.top = targetY + "px";
} else {
tempDiv = document.createElement('div');
tempDiv.id = "tempDiv";
tempDiv.style.background = "#F00";
tempDiv.style.width = "10px";
tempDiv.style.height = "10px";
tempDiv.style.position = "absolute";
tempDiv.style.top = targetY + "px";
document.body.appendChild(tempDiv);
}
tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
Example using
onContactUsClick = () => {
this.scrollToView(document.getElementById("contact-us"), 48);
}
Hope it help
So, perhaps this is a bit clunky but so far so good. Im working in angular 9.
file .ts
scroll(el: HTMLElement) {
el.scrollIntoView({ block: 'start', behavior: 'smooth' });
}
file .html
<button (click)="scroll(target)"></button>
<div #target style="margin-top:-50px;padding-top: 50px;" ></div>
I adjust the offset with margin and padding top.
Saludos!
This works for me in Chrome (With smooth scrolling and no timing hacks)
It just moves the element, initiates the scroll, then moves it back.
There is no visible "popping" if the element is already on the screen.
pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;
You can do it in two steps :
el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here
Solution if you are using Ionic Capacitor, Angular Material, and need to support iOS 11.
document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'});
The key is to scroll to the parent of the parent which is the wrapper around the input. This wrapper includes the label for the input which is now no longer cut off.
If you only need to support iOS 14 the "block" center param actually works, so this is sufficient:
document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'});
I solved this problem by using,
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
This makes the element appear in the center
after scrolling, so I don't have to calculate yOffset
.
Hope it helps...
Here's my 2 cents.
I've also had the issue of the scrollIntoView scrolling a bit past the element, so I created a script (native javascript) that prepends an element to the destination, positioned it a bit to the top with css and scrolled to that one. After scrolling, I remove the created elements again.
HTML:
//anchor tag that appears multiple times on the page
<a href="#" class="anchors__link js-anchor" data-target="schedule">
<div class="anchors__text">
Scroll to the schedule
</div>
</a>
//The node we want to scroll to, somewhere on the page
<div id="schedule">
//html
</div>
Javascript file:
(() => {
'use strict';
const anchors = document.querySelectorAll('.js-anchor');
//if there are no anchors found, don't run the script
if (!anchors || anchors.length <= 0) return;
anchors.forEach(anchor => {
//get the target from the data attribute
const target = anchor.dataset.target;
//search for the destination element to scroll to
const destination = document.querySelector(`#${target}`);
//if the destination element does not exist, don't run the rest of the code
if (!destination) return;
anchor.addEventListener('click', (e) => {
e.preventDefault();
//create a new element and add the `anchors__generated` class to it
const generatedAnchor = document.createElement('div');
generatedAnchor.classList.add('anchors__generated');
//get the first child of the destination element, insert the generated element before it. (so the scrollIntoView function scrolls to the top of the element instead of the bottom)
const firstChild = destination.firstChild;
destination.insertBefore(generatedAnchor, firstChild);
//finally fire the scrollIntoView function and make it animate "smoothly"
generatedAnchor.scrollIntoView({
behavior: "smooth",
block: "start",
inline: "start"
});
//remove the generated element after 1ms. We need the timeout so the scrollIntoView function has something to scroll to.
setTimeout(() => {
destination.removeChild(generatedAnchor);
}, 1);
})
})
})();
CSS:
.anchors__generated {
position: relative;
top: -100px;
}
Hope this helps anyone!
Source: Stackoverflow.com