I'm trying to create a button that scrolls to a particular element that is further down on the page. I have managed to create a function that allows me to scroll to the top offset of the item like this:
const scrollToIntro = () => {
const viewPortOffSet = window.document
.getElementById("introduction")
.getBoundingClientRect();
window.scrollTo({
top: viewPortOffSet.top + window.scrollY,
behavior: "smooth",
});
};
However, I find that scrolling to the top to be a little too much in the sense that have scrolled too far down and would like to subtract some value from top relative to the viewport. One way I've found is to multiply the number by a factor like this:
const scrollToIntro = () => {
const viewPortOffSet = window.document
.getElementById("introduction")
.getBoundingClientRect();
window.scrollTo({
top: viewPortOffSet.top * 0.95 + window.scrollY,
behavior: "smooth",
});
};
But I am wondering if there are alternatives that can maybe involve subtraction of values using "vh" etc.
I want page to scroll up gently when modal opens opens. But it is not working as expected. Instead, the scrollbar is moving abruptly upward. Am I doing anything wrong here ?
ScrollingSteps() {
console.log(window.pageYOffset);/* This is giving me 0, even when scroll
bar is not on the top. Why is it showing this strange behavior ? */
if (window.pageYOffset === 0) {
clearInterval(this.state.intervalId);
}
window.scroll(0, window.pageYOffset - 5);// It is showing abrupt change
console.log(document.body.scrollTop,document.body.style.top)/*Even these 2 are 0 here. Don't understand why!*/
}
ScrollingToTop() {
let myID = setInterval(this.ScrollingSteps.bind(this), 5);
}
with window.scrollTo you can make use of behavior prop adn provide value smooth
window.scrollTo({
top: 0,
left: window.pageYOffset - 5,
behavior: 'smooth',
})
see here for details:
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
I am using scrollIntoView() to go to a selected input. But I set it to top, so I would like to give with an offset to that method.
But this seems not to work I also checked the scrollTo method and did that like this:
this.keyboard.onKeyboardShow().subscribe(() => {
console.log('document.activeElement!!!!', document.activeElement)
// document.activeElement.scrollIntoView(true);
const top = document.activeElement.getBoundingClientRect().top + window.scrollY;
console.log(top);
window.scroll(0, top)
window.scrollTo({
top: top,
behavior: 'smooth'
});
// document.activeElement.scrollTo(0, 10);
window.scrollBy(-100, 0);
});
But this will not scroll to that element anymore. Could somebody help me out setting an offset to scrollIntoView()
How do I scroll to the bottom of the page?
scroll(){
let container = this.$el.querySelector('#scrollingChat')
container.scrollTop = container.scrollHeight
}
I'm doing this, and always calling my api answers, but it does not go to the bottom of the page
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
This is will instantly scroll to the bottom of any page.
If you create an anchor in your page like so:
<div id="top"></div>
you can use:
let elmnt = document.getElementById('top');
elmnt.scrollIntoView(false);
This page explains what the different alignment parameters do for scrollIntoView:
true - scrolls to top of element
false - scrolls to bottom of element
default it true
https://www.w3schools.com/jsref/met_element_scrollintoview.asp
window.scrollTo(0,document.body.scrollHeight);
or you can use smooth scroll: https://github.com/alamcordeiro/vue-smooth-scroll
You may take a look at Mozilla Docs as reference.
Code wise safest use with VueJS is, using nextTick() and ref attribution, especially if execution is triggered following an event (Example: Button Click). + works best if you use some VueJS framework.
Scroll can be applied with smooth behavior for a nicer UX.
Example for specific div
<template><div ref="myScrollTarget">...</div></template>
<script>
...
methods: {
scrollToBottom() {
const targetRef = this.$refs.myScrollTarget;
this.$nextTick(() => {
targetRef.scrollTo(
{
top: targetRef.scrollHeight,
left: 0,
behavior: "smooth"
}
);
});
}
}
...
</script>
Example for full page (window)
<template><div>...</div></template>
<script>
...
methods: {
scrollToBottom() {
this.$nextTick(() => {
window.scrollTo(
{
top: document.body.scrollHeight,
left: 0,
behavior: "smooth"
}
);
});
}
}
...
</script>
I am trying to implement some code on my web page to auto-scroll after loading the page. I used a Javascript function to perform auto-scrolling, and I called my function when the page loads, but the page is still not scrolling smoothly! Is there any way to auto scroll my page smoothly?
Here is my Javascript function:
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
It's not smooth because you've got the scroll incrementing by 50 every 100 milliseconds.
change this and the amount you are scrolling by to a smaller number to have the function run with the illusion of being much more 'smooth'.
turn down the speed amount to make this faster or slower.
function pageScroll() {
window.scrollBy(0,1);
scrolldelay = setTimeout(pageScroll,10);
}
will appear to be much smoother, try it ;)
Try to use jQuery, and this code:
$(document).ready(function(){
$('body,html').animate({scrollTop: 156}, 800);
});
156 - position scroll to (px), from top of page.
800 - scroll duration (ms)
You might want to look at the source code for the jQuery ScrollTo plug-in, which scrolls smoothly. Or maybe even just use the plug-in instead of rolling you own function.
Smoothly running animations depends on the clients machine. No matter how fairly you code, you will never be satisfied the way your animation runs on a 128 MB Ram system.
Here is how you can scroll using jQuery:
$(document).scrollTop("50");
You might also want to try out AutoScroll Plugin.
you can use jfunc function to do this.
use jFunc_ScrollPageDown and jFunc_ScrollPageUp function.
http://jfunc.com/jFunc-Functions.aspx.
Since you've tagged the question as 'jquery', why don't you try something like .animate()? This particular jquery function is designed to smoothly animate all sorts of properties, including numeric CSS properties as well as scroll position.
the numbers are hardcoded, but the idea is to move item by item (and header is 52px) and when is down, go back
let elem = document.querySelector(".spfxBirthdaysSpSearch_c7d8290b ");
let lastScrollValue = 0
let double_lastScrollValue = 0
let scrollOptions = { top: 79, left: 0, behavior: 'smooth' }
let l = console.log.bind(console)
let intScroll = window.setInterval(function() {
double_lastScrollValue = lastScrollValue //last
lastScrollValue = elem.scrollTop // after a scroll, this is current
if (double_lastScrollValue > 0 && double_lastScrollValue == lastScrollValue){
elem.scrollBy({ top: elem.scrollHeight * -1, left: 0, behavior: 'smooth' });
} else {
if (elem.scrollTop == 0){
elem.scrollBy({ top: 52, left: 0, behavior: 'smooth' });
} else {
elem.scrollBy(scrollOptions);
}
}
}, 1000);
Here's another take on this, using requestAnimationFrame. It gives you control of the scroll time, and supports easing functions. It's pretty robust, but fair warning: there's no way for the user to interrupt the scroll.
// Easing function takes an number in range [0...1]
// and returns an eased number in that same range.
// See https://easings.net/ for more.
function easeInOutSine(x) { return -(Math.cos(Math.PI * x) - 1) / 2; }
// Simply scrolls the element from the top to the bottom.
// `elem` is the element to scroll
// `time` is the time in milliseconds to take.
// `easing` is an optional easing function.
function scrollToBottom(elem, time, easing)
{
var startTime = null;
var startScroll = elem.scrollTop;
// You can change the following to scroll to a different position.
var targetScroll = elem.scrollHeight - elem.clientHeight;
var scrollDist = targetScroll - startScroll;
easing = easing || (x => x);
function scrollFunc(t)
{
if (startTime === null) startTime = t;
var frac = (t - startTime) / time;
if (frac > 1) frac = 1;
elem.scrollTop = startScroll + Math.ceil(scrollDist * easing(frac));
if (frac < 0.99999)
requestAnimationFrame(scrollFunc);
}
requestAnimationFrame(scrollFunc);
}
// Do the scroll
scrollToBottom(document.getElementById("data"), 10000, easeInOutSine);