We Keep Coding

How to find the visible text from a div

I want to find the text that is visible on screen from a div (i.e. that is not clipped by the scrollbar regions). Is there a way to see if a child node part is visible on screen?
I can't find anywhere to even find the node coordinates, let alone how to see coords of the word parts of a node.
function doTest() {
var elem = document.getElementById('mydiv');
var nodes = elem.childNodes;
for (var n = 0; n < nodes.length; n++) {
console.log(nodes[n].textContent + isNodeVisible(nodes[n]));
var words = nodes[n].textContent.split(' ');
for (var w = 0; w < words.length; w++) {
console.log(nodes[n].textContent + isNodeWordVisible(nodes[n], w));
if (w > 10) break; // give up
}
if (n > 100) break;
}
}
function isNodeVisible(node) {
return 'who knows';
}
function isNodeWordVisible(node, wordN) {
return 'who knows';
}
div {
margin: 20px;
border: solid 1px grey;
padding: 10px;
width: 200px;
height: 200px;
overflow: scroll
}
<div id='mydiv' onScroll='doTest()'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nunc eget lorem dolor sed viverra ipsum. Quis varius quam quisque id diam vel quam elementum pulvinar. Turpis egestas sed tempus
urna et pharetra pharetra massa. Sed risus pretium quam vulputate dignissim suspendisse in. Quis hendrerit dolor magna eget est. Augue neque gravida in fermentum et sollicitudin. Nec sagittis aliquam malesuada bibendum arcu vitae elementum. Nibh tortor
id aliquet lectus. Volutpat diam ut venenatis tellus in metus vulputate. Massa vitae tortor condimentum lacinia quis vel. Nec ultrices dui sapien eget mi proin sed. Augue neque gravida in fermentum et.Consectetur lorem donec massa sapien. Quis imperdiet
massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Fringilla est ullamcorper eget nulla. Sagittis id consectetur purus ut faucibus. Consequat ac felis donec et. Tellus orci ac auctor augue mauris augue neque gravida. Ut pharetra sit amet aliquam.
A diam maecenas sed enim ut. Cras pulvinar mattis nunc sed blandit libero. Facilisi nullam vehicula ipsum a. Viverra tellus in hac habitasse.Neque gravida in fermentum et sollicitudin ac orci phasellus egestas. Tellus at urna condimentum mattis pellentesque
id nibh. Lorem donec massa sapien faucibus et molestie ac. Aliquam malesuada bibendum arcu vitae. Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Pharetra vel turpis nunc eget. Vitae elementum curabitur vitae nunc. Venenatis lectus
magna fringilla urna porttitor rhoncus dolor purus non. Enim ut sem viverra aliquet eget sit amet. Sem nulla pharetra diam sit amet nisl suscipit. Amet massa vitae tortor condimentum lacinia quis vel. Erat pellentesque adipiscing commodo elit at imperdiet.
Tortor id aliquet lectus proin nibh nisl condimentum id venenatis. A iaculis at erat pellentesque adipiscing. Porta lorem mollis aliquam ut porttitor leo.Tincidunt augue interdum velit euismod in pellentesque massa placerat duis. Bibendum neque egestas
congue quisque. Adipiscing vitae proin sagittis nisl rhoncus mattis. Sem nulla pharetra diam sit amet nisl suscipit adipiscing. Sodales ut eu sem integer. Accumsan lacus vel facilisis volutpat. Adipiscing tristique risus nec feugiat in fermentum posuere
urna nec. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Bibendum est ultricies integer quis auctor elit. Sagittis nisl rhoncus mattis rhoncus urna. Amet facilisis magna etiam tempor orci eu.Fusce ut placerat orci nulla. Suscipit adipiscing
bibendum est ultricies integer quis auctor elit sed. Platea dictumst quisque sagittis purus sit amet volutpat. Ac orci phasellus egestas tellus rutrum tellus pellentesque. Aenean et tortor at risus viverra adipiscing at. Nullam eget felis eget nunc
lobortis mattis aliquam faucibus. Orci dapibus ultrices in iaculis nunc sed. Etiam erat velit scelerisque in dictum non consectetur a. Morbi tristique senectus et netus et malesuada fames ac. Urna duis convallis convallis tellus id interdum velit. Nam
at lectus urna duis convallis convallis tellus id. Nullam eget felis eget nunc lobortis mattis aliquam. Faucibus turpis in eu mi bibendum neque. Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Sed augue lacus viverra vitae congue.
Fermentum posuere urna nec tincidunt praesent semper feugiat nibh. Vel facilisis volutpat est velit. Dignissim diam quis enim lobortis scelerisque fermentum dui. Neque ornare aenean euismod elementum. At urna condimentum mattis pellentesque id.Massa
eget egestas purus viverra accumsan in nisl nisi. Arcu cursus vitae congue mauris. Phasellus faucibus scelerisque eleifend donec pretium. Odio facilisis mauris sit amet massa vitae. Amet commodo nulla facilisi nullam vehicula ipsum a. Est velit egestas
dui id ornare arcu odio. Enim lobortis scelerisque fermentum dui. Natoque penatibus et magnis dis parturient montes nascetur ridiculus. Morbi tristique senectus et netus et malesuada fames ac turpis. Nec tincidunt praesent semper feugiat nibh sed pulvinar.
Consequat semper viverra nam libero. Non curabitur gravida arcu ac tortor dignissim convallis aenean. Dignissim suspendisse in est ante in nibh mauris cursus.Tellus in metus vulputate eu scelerisque. In massa tempor nec feugiat nisl pretium fusce id.
Eget velit aliquet sagittis id consectetur. Dictumst quisque sagittis purus sit. Eget sit amet tellus cras adipiscing enim. Non enim praesent elementum facilisis leo vel fringilla est. Aliquet eget sit amet tellus cras adipiscing enim eu. Pellentesque
id nibh tortor id aliquet lectus proin nibh. Imperdiet massa tincidunt nunc pulvinar sapien et. Leo integer malesuada nunc vel risus commodo. Feugiat sed lectus vestibulum mattis. Eu feugiat pretium nibh ipsum consequat nisl. Maecenas accumsan lacus
vel facilisis volutpat est velit egestas.Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Nunc pulvinar sapien et ligula ullamcorper. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Erat imperdiet sed euismod nisi
porta lorem mollis. In vitae turpis massa sed elementum tempus egestas sed. Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Tortor vitae purus faucibus ornare suspendisse. Eget magna fermentum iaculis eu non diam. Dui id ornare
arcu odio ut sem nulla pharetra. Viverra vitae congue eu consequat ac felis donec et odio. Aliquam sem et tortor consequat id porta nibh venenatis. Consequat semper viverra nam libero justo laoreet. Purus faucibus ornare suspendisse sed nisi lacus.
In arcu cursus euismod quis viverra. Tortor id aliquet lectus proin nibh nisl condimentum. Egestas congue quisque egestas diam in arcu. Sed risus ultricies tristique nulla aliquet enim tortor. Amet luctus venenatis lectus magna. Est placerat in egestas
erat imperdiet sed euismod.Leo integer malesuada nunc vel risus commodo viverra maecenas. Mi proin sed libero enim sed faucibus turpis. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Vel risus commodo
</div>
Any thoughts?

You can use the Intersection Observer API if you want to see when a element is visible or is intercepting another element:
const callback = (entries, observer) => {
entries.forEach((entry) => {
...
});
};
const observer = new IntersectionObserver(callback, {
root: null, // viewport
rootMargin: '0px',
threshold: 1.0
});
const target = document.querySelector('#mydiv');
observer.observe(target);

Ok - I think I've come up with a work around -
Insert some invisible tags (<a class='split'></a>) every 200 visible (non-tag) characters
Use a lazy-load technique to scan for the "splits" and ask if they are visible
Then using the knowledge of which splits are visible and which aren't I can guess which words are likely to be in the visible section of the container (within 200 characters).
function doAddSplits() {
var elem=document.getElementById('mydiv');
var intag=false;
var c;
var step=100;
var splitElemTx='<a class=\'split\'></a>';
var n=0;
elem.innerHTML=splitElemTx+elem.innerHTML;
for(var p=0; p<elem.innerHTML.length; p++) {
c=elem.innerHTML.substr(p,1);
if ( c=='<' ) intag=true;
else if ( c=='>' ) intag=false;
else {
n++;
if ( n>=step && !isAlphabetic(c)) {
elem.innerHTML=elem.innerHTML.substr(0,p)+splitElemTx+elem.innerHTML.substr(p);
p=p+splitElemTx.length;
n=0;
}
}
}
}
function doScrollDiv(){
var splits=document.getElementsByClassName('split');
var container=document.getElementById('mydiv');
for(var s=0; s<splits.length; s++){
removeClassName(splits[s],'onscreen');
if(isInViewport(splits[s], container)){
addClassName(splits[s],'onscreen');
}
}
}
function isInViewport(el, containerElem){
var rect = el.getBoundingClientRect();
var container = containerElem.getBoundingClientRect();
return (
rect.bottom >= container.top &&
rect.right >= container.left &&
rect.top <= (container.bottom) &&
rect.left <= (container.right)
);
}

How to get the exact smooth scrolling functionality of Chrome?

When the user clicks a button on my page it creates a new element below it and then scrolls downwards towards it. I'd like this to be done smoothly, and that can be accomplished like so:
window.scroll({ top: document.body.scrollHeight, behavior: "smooth" });
However, this does not work on Safari, so it appears that I need to use a custom function instead to get this functionality.
I searched around and found this (current answer, but suboptimal):
doScrolling = (elementY, duration) => {
let startingY = window.pageYOffset;
let diff = elementY - startingY;
var start;
// Bootstrap our animation - it will get called right before next frame shall be rendered.
window.requestAnimationFrame(function step(timestamp) {
if (!start) { start = timestamp; }
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
// Get percent of completion in range [0, 1].
let percent = Math.min(time / duration, 1);
window.scrollTo(0, startingY + diff * percent);
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) { return; }
// Proceed with animation as long as we wanted it to.
if (time < duration) {
window.requestAnimationFrame(step);
}
})
}
Called like: this.doScrolling(document.body.scrollHeight, 750);
Which seems to work, but it doesn't seem to have the same semantics as window.scroll.
For one, you need to specify a duration, whereas with window.scroll it's implied.
Secondly, it seems as if window.scroll uses a different transition type? It's hard to tell, but it feels more like an ease as opposed to a linear transition, where it starts off slow, then goes fast, and then slows to a stop.
Is it possible to modify the above function to mimic the exact semantics of window.scroll such that you can't tell the difference between calling the two?
To clarify, I don't need to clone all the functionalities of window.scroll. The only thing I require is the ability to scroll to a given position (in my case it's always the end of the page) in a smooth manner. The function I provided above in my question is almost perfect, except that it's slightly janky and doesn't feel as smooth as window.scroll. I think it may be the animation style? It's kind of hard to tell why it looks "worse" since it's so fast.

You could try using AnimeJS
add <script src="path/to/anime.min.js"></script> to your HTML page
or via CDN at https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js
And then
doScrolling = (elementY) => {
const startingY = window.pageYOffset
const diff = elementY - startingY
const obj = {
pos: startingY
}
const anime({
targets: obj,
pos: startingY + diff,
round: 1,
easing: 'easeInOutQuad',
update: function() {
window.scrollTo(0, obj.pos)
}
}).play()
}

There was already an almost duplicate of this question (actually asking for what you need in a better way) that you should probably read.
You can't really write a script that does the same as the browser's implementations, because every browser has a different behavior.
Chrome for instance will ease in out the scrolling, i.e it will go slower at the beginning and the end of the animation, Firefox on the other hand uses a linear interpolation (a constant speed). Testing this accurately is near impossible.
But that's not a problem, because you don't need a script that does the same, you need a polyfill, which will add the missing feature only to the ones that need it, and let the original one of the browser that already support it.
So as pointed out in CDK's answer, there is a polyfill available, heavily tested and not too big (429 lines 11.1KB unminified with commments).
But I also did wrote a smaller version for that question, that fits here in about 100 lines:
/* Polyfills the Window#scroll(options) & Window#scrollTo(options) */
(function ScrollPolyfill() {
// Safari incorrectly goes through the "behavior" member
// making #nlawson"s solution failing there...
// so we go back to ugly CSS check
if (!('scrollBehavior' in document.documentElement.style)) {
attachPolyfill();
}
function attachPolyfill() {
var original = window.scroll, // keep the original method around
animating = false, // will keep our timer's id
dx = 0,
dy = 0,
target = null;
// override our methods
window.scrollTo = window.scroll = function polyfilledScroll(user_opts) {
// if we are already smooth scrolling, we need to stop the previous one
// whatever the current arguments are
if (animating) {
clearAnimationFrame(animating);
}
// not the object syntax, use the default
if (arguments.length === 2) {
return original.apply(this, arguments);
}
if (!user_opts || typeof user_opts !== 'object') {
throw new TypeError("value can't be converted to a dictionnary");
}
// create a clone to not mess the passed object
// and set missing entries
var opts = Object.assign({
left: window.pageXOffset,
top: window.pageYOffset,
behavior: 'auto'
},
user_opts
);
if (opts.behavior !== 'instant' && opts.behavior !== 'smooth') {
// parse 'auto' based on CSS computed value of 'smooth-behavior' property
// But note that if the browser doesn't support this variant
// There are good chances it doesn't support the CSS property either...
opts.behavior = window.getComputedStyle(document.scrollingElement || document.body)
.getPropertyValue('scroll-behavior') === 'smooth' ?
'smooth' : 'instant';
}
if (opts.behavior === 'instant') {
// not smooth, just default to the original after parsing the oject
return original.call(this, opts.left, opts.top);
}
// update our direction
dx = (opts.left - window.pageXOffset) || 0;
dy = (opts.top - window.pageYOffset) || 0;
// going nowhere
if (!dx && !dy) {
return;
}
// save passed arguments
target = opts;
// save the rAF id
animating = anim();
};
// the animation loop
function anim() {
var freq = 16 / 300, // whole anim duration is approximately 300ms #60fps
posX, poxY;
if ( // we already reached our goal on this axis ?
(dx <= 0 && window.pageXOffset <= +target.left) ||
(dx >= 0 && window.pageXOffset >= +target.left)
) {
posX = +target.left;
} else {
posX = window.pageXOffset + (dx * freq);
}
if (
(dy <= 0 && window.pageYOffset <= +target.top) ||
(dy >= 0 && window.pageYOffset >= +target.top)
) {
posY = +target.top;
} else {
posY = window.pageYOffset + (dx * freq);
}
// move to the new position
original.call(window, posX, posY);
// while we are not ok on both axis
if (posX !== +target.left || posY !== +target.top) {
requestAnimationFrame(anim);
} else {
animating = false;
}
}
}
})();
// How to use
function scrollWin() {
window.scrollTo({
left: 1000,
top: 1000,
behavior: 'smooth'
});
}
body {
height: 5000px;
width: 5000px;
/* https://stackoverflow.com/a/51054396/3702797 */
background-image: linear-gradient(to right, rgba(192, 192, 192, 0.75), rgba(192, 192, 192, 0.75)), linear-gradient(to right, black 50%, white 50%), linear-gradient(to bottom, black 50%, white 50%);
background-blend-mode: normal, difference, normal;
background-size: 20px 20px;
}
<p>Click the button to scroll the document window to 1000 pixels.</p>
<button onclick="scrollWin()">Click me to scroll!</button>

I use a lot of Pixelarity templates for my clients' websites, and there is a script that (I think) does what you're looking for and is browser cross-compatible. It's called scrolly.js.
I've copied it below (since I also use RequireJS, I encapsulate it in a requires call), and you can also see it in action in many Pixelarity templates including Visualize and Atmosphere
requirejs(['jquery'],function(e){
function u(s,o){
var u,a,f;
if((u=e(s))[t]==0) return n;
a=u[i]()[r];
switch(o.anchor){
case"middle":
f=a-(e(window).height()-u.outerHeight())/2;
break;
default:
case r:
f=Math.max(a,0)
}
return typeof o[i]=="function"?f-=o[i]():f-=o[i], f
}
var t="length",n=null,r="top",i="offset",s="click.scrolly",o=e(window);
e.fn.scrolly=function(i){
var o,a,f,l,c=e(this);
if(this[t]==0) return c;
if(this[t]>1){
for(o=0; o<this[t]; o++) e(this[o]).scrolly(i);
return c
}
l=n, f=c.attr("href");
if(f.charAt(0)!="#"||f[t]<2) return c;
a=jQuery.extend({
anchor:r,
easing:"swing",
offset:0,
parent:e("body,html"),
pollOnce:!1,
speed:1e3
},i), a.pollOnce&&(l=u(f,a)), c.off(s).on(s,function(e){
var t=l!==n?l:u(f,a);
t!==n&&(e.preventDefault(), a.parent.stop().animate({scrollTop:t},a.speed,a.easing))
})
}
});
and you can invoke it on specific elements via jQuery like so (assuming you assign the scrolly class to those anchor elements:
$('.scrolly').scrolly();
I personally also have a header nav that comes down after you scroll down the page, so I include an offset to get the scroll destination just right...
$('.scrolly').scrolly({
offset:function(){
return $('.header').height();
}
});

function myFunction() {
var inputCount = $(".demo").children("input").length;
var idInput = inputCount + 1
$(".demo").append( "<input id="+idInput+" type='text'>");
var inputLast = $('.demo').children().last().attr('id');
$('html, body').animate({
scrollTop: $("#" + inputLast).offset().top
}, 500);
}
.demo input {
width: 100%;
margin: 0 0 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="myFunction()">Click me</button>
<p class="demo"><input id="1" type="text"></p>

After some close inspection of the timings of window.scroll i would propose the following changes for the doScrolling function.
Use window.scrollBy and set ScrollToOptions.behavior to smooth. it seems that a rate of 2px-2.5px per millisecond is kept in window.scroll after some time, and the timing function is ease-out, since at the first 200 milliseconds a slower rate is kept. You may adjust that rate and timing function by changing the calculation of totalTime.
The above changes mean that you will only have to change three lines of your code and add one.
Please do check the timings of each method supplied in the console.
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) { // this will set the proper totalTime but it adds a delay of about 600ms
totalTime = diff/0.75;
} else {
totalTime = diff/2;
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
window.scrollBy({ top: diff * percent, behavior: "smooth" });
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
doScrolling(document.body.scrollHeight);
You could try both methods in the following examples to test for your own.
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) {
totalTime = diff/0.75; // what to do the first 200 ms
} else {
totalTime = diff/0.125; // this will set the proper totalTime but it adds a delay of about 600ms
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
console.info(parseInt(time),parseInt(diff * percent));
window.scrollBy({
left: 0,
top: diff * percent,
behavior: "auto"
});
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
/*const testStart = new Date().getTime();
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});*/
doScrolling(document.body.scrollHeight);
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis congue massa, pellentesque malesuada enim.
Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus, vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa.
In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue. Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam.
Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae ornare ante sem semper dolor. Duis hendrerit aliquet luctus.
Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim.
Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis. Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida.
Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex, eu dictum diam. Aenean congue sem nec hendrerit faucibus.
Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis.
Vestibulum sit amet nunc in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in.
In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra ex, sed finibus ipsum bibendum et.
Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Donec cursus ex a pretium venenatis. Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris. Aliquam erat volutpat. Aliquam vitae ultrices sapien, a aliquet sapien. Nunc id ligula sit amet nisi porta egestas. Proin lacinia congue mauris, in semper nunc pretium vitae. Nunc convallis dolor id neque vulputate, vitae eleifend dui tincidunt. Maecenas in viverra sapien. Maecenas egestas ex quis turpis ornare, eget auctor lacus condimentum. Vestibulum maximus tellus metus, nec laoreet nisl imperdiet eu. Duis nec finibus lacus, ut sagittis dui. Praesent accumsan, tellus in blandit mollis, sem metus dapibus magna, id imperdiet mauris nisi sed est. Phasellus sed mollis diam. Morbi sagittis arcu in mi ultrices, sit amet pretium sapien volutpat. Duis pellentesque urna quis urna tristique gravida.
</div>
function doScrolling(elementY) {
let start;
let startingY = window.pageYOffset || document.documentElement.scrollTop;
let diff = elementY - startingY;
let totalTime;
window.requestAnimationFrame(function step(timestamp) {
if (!start) {
start = timestamp;
}
// Elapsed milliseconds since start of scrolling.
let time = timestamp - start;
if(time < 200) {
totalTime = diff/0.75; // what to do the first 200 ms
} else {
totalTime = diff/185; // this will break scroll height to larger chunks and remove the delay, in this example it will scroll all the height (1 chunk)
}
// Get percent of completion in range [0, 1].
let percent = Math.min(time/totalTime, 1);
console.info(parseInt(time),parseInt(diff * percent));
window.scrollBy({
top: diff * percent,
behavior: "smooth"
});
let isScrollAtBottom = (window.innerHeight + window.pageYOffset) >= document.body.scrollHeight - 3;
if (isScrollAtBottom) {
return;
}
// Proceed with animation as long as we wanted it to.
if (time < totalTime) {
window.requestAnimationFrame(step);
}
})
}
const testStart = new Date().getTime();
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});
doScrolling(document.body.scrollHeight);
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit
ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur
nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis
congue massa, pellentesque malesuada enim. Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu
sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum
odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus,
vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa. In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue.
Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec
condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam. Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis
orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a
sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae
ornare ante sem semper dolor. Duis hendrerit aliquet luctus. Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id
lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere
in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim. Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis.
Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae
vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique
et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida. Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut
faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex,
eu dictum diam. Aenean congue sem nec hendrerit faucibus. Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae
posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam
tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui
eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis. Vestibulum sit amet nunc
in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet
at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in. In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed
consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra
ex, sed finibus ipsum bibendum et. Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa
eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus ex a pretium venenatis.
Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris.
</div>
const testStart = new Date().getTime();
window.scroll({
top: document.body.scrollHeight,
behavior: "smooth"
});
window.addEventListener('scroll', () => {
let now = new Date().getTime();
let currentScrollOffset = window.pageYOffset || document.documentElement.scrollTop;
console.log(now-testStart, currentScrollOffset);
});
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis aliquam libero. Vestibulum eu neque non augue tristique fermentum. Ut vulputate molestie metus in maximus. Integer a condimentum nisl, a vulputate nisl. Fusce vitae nulla a diam hendrerit
ornare ac et ante. Aenean ac tortor turpis. Proin facilisis convallis iaculis. Maecenas vestibulum mauris mi, sit amet gravida augue malesuada at. Ut efficitur magna nunc, ac consequat ipsum interdum nec. Etiam vel ante vitae odio ornare luctus. Curabitur
nunc ipsum, porttitor id enim ut, pellentesque vestibulum lorem. Sed tincidunt turpis ac ex tempus finibus. Praesent eget imperdiet ex. Morbi hendrerit pretium libero sit amet mattis. Sed a purus nec sapien mollis venenatis et vitae sem. Curabitur quis
congue massa, pellentesque malesuada enim. Quisque blandit quam posuere hendrerit venenatis. Vestibulum quis dictum felis. Aliquam non bibendum quam. Donec aliquam ex vel metus tristique tincidunt. Duis condimentum felis lacus. Integer gravida eu arcu
sed placerat. Sed placerat, est nec luctus gravida, odio nisl vehicula risus, a aliquet massa sem eget leo. Nulla quis turpis ut lectus consequat tincidunt id sit amet lacus. Sed congue, massa fringilla venenatis iaculis, mi erat vulputate est, a vestibulum
odio odio sit amet elit. Nulla suscipit rhoncus nisi, a lobortis arcu. Mauris malesuada placerat purus, eget molestie nisi. Nam luctus, odio a aliquam varius, ipsum ante malesuada augue, in congue metus eros id nibh. In varius justo et nunc maximus,
vel blandit leo ullamcorper. Phasellus sit amet mi non dui consectetur porta sed vitae ex. Integer mauris diam, vulputate vel turpis ac, ornare auctor massa. In hac habitasse platea dictumst. Proin id justo erat. Integer pretium luctus quam id congue.
Aenean blandit rhoncus accumsan. Nulla ut luctus quam, nec vehicula ligula. Proin finibus sit amet dolor sit amet fringilla. Donec sodales iaculis dolor, sit amet egestas nisi. Aliquam nec scelerisque dolor. Donec maximus nulla eu quam posuere, nec
condimentum nisl tristique. Aliquam venenatis massa cursus, scelerisque risus vitae, mattis quam. Aliquam rhoncus quam quis erat ornare cursus. Vivamus et risus at risus pellentesque fermentum id ac eros. Phasellus vel molestie lacus, eget facilisis
orci. Sed efficitur velit molestie nulla scelerisque elementum. Vestibulum luctus nibh justo, at venenatis purus tincidunt at. Pellentesque feugiat condimentum lorem, et accumsan odio. Nam sagittis lorem ut orci dictum fermentum. Integer non augue a
sapien semper dictum sit amet ut orci. Aliquam a ultrices risus, non tincidunt enim. Aliquam neque metus, dapibus sed elit a, tempus pretium ante. Nullam non ex in leo tempus facilisis. Duis tempor, nibh at porta euismod, augue est auctor nisi, vitae
ornare ante sem semper dolor. Duis hendrerit aliquet luctus. Sed aliquet sem massa, vitae sodales eros fringilla quis. Quisque non dictum mi, quis facilisis augue. Ut scelerisque laoreet tellus, sed elementum metus pulvinar at. Maecenas faucibus id
lorem faucibus maximus. Praesent efficitur, diam quis accumsan posuere, nunc diam porta est, sit amet facilisis velit urna non urna. Vivamus aliquet justo lorem. In hac habitasse platea dictumst. Curabitur auctor ornare sapien, id scelerisque mi posuere
in. Morbi nec nisi tortor. Nulla et nisl odio. Integer nec consequat enim. Integer dui diam, interdum bibendum velit at, accumsan fringilla libero. Suspendisse ac turpis et libero ullamcorper pretium. Etiam non mauris sapien. Nulla non massa turpis.
Vestibulum accumsan metus risus, eget pretium nisi auctor in. Pellentesque imperdiet neque lacus, vitae dictum lorem iaculis sit amet. Donec at lacinia metus. Vivamus feugiat non quam non pulvinar. Sed eget eleifend dolor. Fusce suscipit, orci vitae
vehicula sollicitudin, mi sem luctus lorem, tempor volutpat purus metus eget ipsum. Duis accumsan tellus non metus ultrices tempus. Etiam ut eros vitae purus pharetra interdum. Morbi a odio nibh. Proin gravida quam elit, at sollicitudin ipsum tristique
et. In nec dolor pharetra, consequat dui ut, rutrum enim. Donec mollis felis consectetur turpis interdum, eu pellentesque nisi gravida. Vivamus mollis, sem vitae finibus pretium, nunc sapien pulvinar est, quis sodales ligula augue nec ipsum. Duis ut
faucibus elit, tincidunt interdum sem. Fusce semper enim eget augue lacinia mattis. Aliquam venenatis pretium tellus. Fusce rutrum magna sed erat varius, sit amet luctus dui rutrum. Sed finibus vestibulum massa at porttitor. Vestibulum in commodo ex,
eu dictum diam. Aenean congue sem nec hendrerit faucibus. Etiam viverra nulla sed massa accumsan facilisis. Vivamus fermentum luctus nulla eu tempor. Sed sit amet velit in purus egestas elementum nec gravida sapien. Nullam elementum porttitor nisi vitae
posuere. Donec quis nulla at elit consequat gravida. Nulla ac tristique augue, nec molestie quam. Aenean sodales molestie metus, et vulputate sapien facilisis eu. Morbi posuere, orci ac pellentesque vestibulum, eros libero porttitor dolor, sed aliquam
tortor neque id purus. Vestibulum non porttitor orci. Maecenas aliquet, nulla sed laoreet tempor, urna augue aliquam augue, quis convallis tellus enim vel justo. Sed eu aliquam ligula, id feugiat leo. Phasellus id cursus sapien. Duis imperdiet, dui
eu commodo ultrices, felis mauris malesuada lacus, a dictum nisl quam eget nulla. Vivamus tristique imperdiet purus ac pretium. In suscipit ac justo nec congue. Duis gravida elit pharetra ante posuere, sed eleifend mi mattis. Vestibulum sit amet nunc
in augue consequat lobortis at eu mauris. Nunc congue nisl lorem, vel hendrerit velit condimentum a. Nulla commodo nisl pulvinar elementum viverra. Integer sed ipsum sit amet est egestas porta. Quisque aliquet eu dolor nec mattis. Sed felis leo, imperdiet
at efficitur in, volutpat vitae lacus. Nunc vulputate vulputate quam, id molestie neque laoreet in. In dapibus fermentum lectus, a porta velit. Aenean nec mollis sapien. Vivamus a arcu vulputate risus pulvinar tincidunt. Fusce sed bibendum purus, sed
consequat eros. Praesent accumsan nisl a sagittis vestibulum. Vivamus nisi ante, aliquet nec lacus sit amet, luctus maximus ipsum. Suspendisse scelerisque accumsan luctus. Sed eros risus, viverra in ligula non, varius condimentum lacus. Sed dictum pharetra
ex, sed finibus ipsum bibendum et. Nullam sodales cursus scelerisque. Etiam nibh est, lacinia rhoncus tristique a, pretium vitae quam. Praesent urna nisi, placerat nec viverra quis, pharetra vel sapien. In sed imperdiet lectus. Aliquam scelerisque massa
eget augue sodales egestas. Suspendisse feugiat massa sed lacus rhoncus, sed accumsan sem eleifend. Sed sed semper lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec cursus ex a pretium venenatis.
Praesent fringilla leo eu posuere sagittis. Suspendisse lacinia, leo a volutpat vehicula, mauris purus semper est, condimentum bibendum justo eros nec mauris. Aliquam erat volutpat. Aliquam vitae ultrices sapien, a aliquet sapien. Nunc id ligula sit
amet nisi porta egestas. Proin lacinia congue mauris, in semper nunc pretium vitae. Nunc convallis dolor id neque vulputate, vitae eleifend dui tincidunt. Maecenas in viverra sapien. Maecenas egestas ex quis turpis ornare, eget auctor lacus condimentum.
Vestibulum maximus tellus metus, nec laoreet nisl imperdiet eu. Duis nec finibus lacus, ut sagittis dui. Praesent accumsan, tellus in blandit mollis, sem metus dapibus magna, id imperdiet mauris nisi sed est. Phasellus sed mollis diam. Morbi sagittis
arcu in mi ultrices, sit amet pretium sapien volutpat. Duis pellentesque urna quis urna tristique gravida. Duis ut finibus elit, sed suscipit nibh. Proin tristique, velit ut mattis blandit, tortor nisl rhoncus enim, id scelerisque enim lacus et ante.
</div>

scrollTo speed/duration setting

Is there a way to speed up the behavior speed of scrollTo?
I had a stab in the dark at speed and duration but don't work!
window.scrollTo({
top: 1000,
behavior: "smooth"
});
Reference:
https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

Live example solution with pure javascript below:
// Bind your button click, scroll direction and effect speed
document.getElementById("btn-go-top").onclick = function () {
// Check if it's really on the floor
if(document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight === 0) {
scrollTo(0, 13000);
}
}
// Check if it's really at the top
document.getElementById("btn-go-floor").onclick = function () {
if(document.documentElement.scrollTop === 0) {
scrollTo(document.documentElement.scrollHeight-document.documentElement.clientHeight, 4269);
}
}
/*--------------------------------------------
Functions to make scroll with speed control
---------------------------------------------*/
// Element or Position to move + Time in ms (milliseconds)
function scrollTo(element, duration) {
var e = document.documentElement;
if(e.scrollTop===0){
var t = e.scrollTop;
++e.scrollTop;
e = t+1===e.scrollTop--?e:document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if(typeof from === "object")from=from.offsetTop;
if(typeof to === "object")to=to.offsetTop;
// Choose one effect like easeInQuart
scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed<= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
/* Effects List */
function linearTween(t){
return t;
}
function easeInQuad(t){
return t*t;
}
function easeOutQuad(t){
return -t*(t-2);
}
function easeInOutQuad(t){
t/=0.5;
if(t<1)return t*t/2;
t--;
return (t*(t-2)-1)/2;
}
function easeInCuaic(t){
return t*t*t;
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
function easeInOutCuaic(t){
t/=0.5;
if(t<1)return t*t*t/2;
t-=2;
return (t*t*t+2)/2;
}
function easeInQuart(t){
return t*t*t*t;
}
function easeOutQuart(t){
t--;
return -(t*t*t*t-1);
}
function easeInOutQuart(t){
t/=0.5;
if(t<1)return 0.5*t*t*t*t;
t-=2;
return -(t*t*t*t-2)/2;
}
function easeInQuint(t){
return t*t*t*t*t;
}
function easeOutQuint(t){
t--;
return t*t*t*t*t+1;
}
function easeInOutQuint(t){
t/=0.5;
if(t<1)return t*t*t*t*t/2;
t-=2;
return (t*t*t*t*t+2)/2;
}
function easeInSine(t){
return -Math.cos(t/(Math.PI/2))+1;
}
function easeOutSine(t){
return Math.sin(t/(Math.PI/2));
}
function easeInOutSine(t){
return -(Math.cos(Math.PI*t)-1)/2;
}
function easeInExpo(t){
return Math.pow(2,10*(t-1));
}
function easeOutExpo(t){
return -Math.pow(2,-10*t)+1;
}
function easeInOutExpo(t){
t/=0.5;
if(t<1)return Math.pow(2,10*(t-1))/2;
t--;
return (-Math.pow(2,-10*t)+2)/2;
}
function easeInCirc(t){
return -Math.sqrt(1-t*t)-1;
}
function easeOutCirc(t){
t--;
return Math.sqrt(1-t*t);
}
function easeInOutCirc(t){
t/=0.5;
if(t<1)return -(Math.sqrt(1-t*t)-1)/2;
t-=2;
return (Math.sqrt(1-t*t)+1)/2;
}
html {
padding: 26px;
}
body {
margin: auto;
max-width: 690px;
border: 8px solid whitesmoke;
}
h1, h2 {
font-size: 22.5px;
text-align: center;
}
img {
margin: auto;
display: block;
width: 526px;
}
div {
margin: 69px;
text-align: justify;
}
center {
margin: 26px;
}
button {
font-size: 13px;
min-width: 269px;
padding: 8px;
font-weight: bold;
cursor: pointer;
border-radius: 13px;
border-style: ridge;
background: #ffeb00e0;
}
<center>
<button id="btn-go-floor" type="button">Click & Go FAST to the FLOOR!</button>
</center>
<h1>Pure JavaScript NewsPaper</h1>
<img src="https://miro.medium.com/max/700/0*oYERjNNFMUQoiKJt.png"/>
<h2>Scroll Direction & Speed Control with pure JavaScript</h2>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lorem mauris, lobortis sit amet ex ac, eleifend vestibulum ante. Mauris tincidunt, nunc interdum porttitor euismod, risus elit consectetur ligula, id fringilla erat sem eu neque. Integer tellus mi, vulputate condimentum ipsum vel, mollis dignissim dui. Nunc non ante odio. Maecenas id purus aliquam, ultrices lorem vel, vulputate tortor. Phasellus ut elementum felis, vel posuere sapien. Curabitur luctus leo quam, a mollis justo dignissim vitae. Integer venenatis elit et justo congue porta ut eu nisi.</p>
<p>Fusce quis quam non magna hendrerit tempus ut eget diam. Nunc posuere convallis magna, eu rhoncus leo aliquam id. Integer vestibulum in purus quis semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus tortor. Quisque ante elit, tristique quis magna eu, blandit porttitor ex. In suscipit dui at urna ullamcorper finibus. Vivamus porttitor felis lectus, ultricies dignissim ex tristique a. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce venenatis diam et leo feugiat elementum. Aliquam pulvinar lobortis sapien non ultricies. Maecenas aliquam ipsum eget sem congue lobortis.</p>
<p>Maecenas feugiat vitae quam quis facilisis. In sit amet nisi ut est ultricies porttitor. Pellentesque tortor erat, congue at odio sit amet, pharetra lacinia mi. Sed ac massa magna. Curabitur rhoncus dignissim ex, at tempus lacus molestie vel. Sed maximus quam in sagittis tincidunt. Aliquam erat volutpat. Nulla at justo sapien. Duis accumsan diam sed tempus mattis. Fusce eu neque venenatis, interdum justo in, blandit ante. Integer ut ante nibh.</p>
<p>Etiam iaculis purus sollicitudin ornare eleifend. Duis tincidunt, sem quis dapibus molestie, arcu ipsum tristique diam, commodo suscipit sapien lacus et eros. Ut sed posuere augue. Nam quis elit tristique odio fermentum ultricies id eu turpis. Morbi pellentesque congue nisl sed blandit. Sed sed nibh arcu. Curabitur quis risus at tortor tristique porttitor eget dapibus tellus. Cras elit eros, sollicitudin sed tempus dictum, consequat vel nulla. Nulla ac turpis non erat suscipit semper ut in enim. Nam feugiat erat eu neque semper aliquet. Suspendisse augue dui, venenatis eu metus in, ultricies varius ante. Sed magna ligula, lobortis nec interdum sed, ornare sed risus. Fusce venenatis euismod tortor, non vestibulum ligula placerat sit amet. Nullam placerat risus ut libero semper, vitae lobortis tortor pharetra. Quisque in ex in ante egestas imperdiet a eu ligula.</p>
<p>Vivamus sit amet enim at ligula elementum interdum. Integer imperdiet neque luctus, convallis lacus a, consectetur turpis. Aenean rhoncus sodales diam, non elementum augue fermentum sed. Cras eu dui quis dolor finibus laoreet. Vestibulum ut nisl venenatis, imperdiet leo sit amet, mollis nisi. Ut venenatis magna et nisl tincidunt, at porta ante sodales. Nullam dignissim viverra massa eu faucibus. Cras diam nisl, dignissim nec euismod non, iaculis id mauris. Cras sed ex vitae nibh ornare tempor aliquet quis leo.</p>
<p>Aliquam a placerat velit, at semper dui. Praesent sed odio in sem ultrices tincidunt et nec nulla. Sed sed auctor neque. Nunc ultricies erat malesuada erat rutrum, placerat convallis lacus luctus. Morbi sit amet ligula quis purus varius commodo posuere euismod sem. Donec vestibulum sollicitudin dui, sit amet dapibus urna consectetur vel. Integer congue dui id elit consectetur, vitae lobortis turpis gravida.</p>
<p>Cras ut mauris interdum, pulvinar justo ut, elementum diam. Fusce feugiat dolor malesuada, imperdiet justo ac, convallis magna. Pellentesque et libero ac diam efficitur pulvinar sed vitae erat. Praesent id placerat quam. Praesent consectetur turpis mauris, ut rutrum elit malesuada egestas. Donec volutpat eu augue vel sollicitudin. Sed egestas scelerisque lobortis. Praesent venenatis faucibus risus. Ut semper malesuada nibh vel facilisis. Phasellus lobortis faucibus velit, nec viverra arcu cursus sed. Cras fringilla eros velit, eget molestie velit tempor vel. Aliquam consectetur suscipit orci, ut tristique nibh commodo nec. In sollicitudin dignissim mi vel rutrum. Mauris elementum, dolor quis cursus aliquet, urna sapien pharetra mi, nec egestas ligula risus quis felis. Nam consectetur est in quam gravida dictum. Sed at nisi aliquet, mollis mi eget, gravida neque.</p>
<p>Nulla est massa, fringilla vitae consequat in, congue eget purus. Etiam et erat lacus. Nulla interdum, lorem vel eleifend hendrerit, ex elit hendrerit elit, vitae auctor leo nisl vehicula dolor. Nullam porttitor odio turpis, tempus commodo tellus lacinia aliquet. Mauris malesuada ut tellus vel maximus. Quisque ut venenatis nulla. Etiam scelerisque suscipit pretium. Aliquam sed dapibus nibh. Pellentesque varius, enim ut facilisis ultrices, ipsum libero dignissim velit, eu sollicitudin orci tellus rhoncus ante. Nunc sed egestas ex, vel consectetur quam. Nullam at dignissim ante, ut hendrerit purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit a dolor et tincidunt. Cras eros diam, laoreet in mattis eget, luctus in lorem. Ut eget massa dictum, facilisis libero sit amet, feugiat tortor.</p>
<p>Donec vehicula a orci in lacinia. Fusce sed tellus non erat vulputate aliquam et gravida odio. Proin at mauris facilisis ex eleifend ullamcorper. Proin ultrices vehicula eros, quis viverra orci hendrerit ultricies. Aliquam blandit sagittis felis porttitor aliquet. Cras sollicitudin pharetra pulvinar. Quisque et ipsum magna. Aliquam aliquet eros eget ligula dignissim aliquet. Vivamus interdum velit et sem ultricies facilisis. Quisque felis ipsum, laoreet sit amet est ut, molestie tristique tortor. Duis sapien neque, pharetra eget malesuada nec, porta tempor velit. Vestibulum non lobortis erat. Proin non orci augue. Donec ultrices tincidunt dolor, sit amet commodo est.</p>
<p>Mauris ut venenatis orci. Maecenas eget justo dui. Vestibulum ut dolor vulputate, tincidunt velit vel, consectetur neque. Sed erat odio, condimentum sed sollicitudin eu, tincidunt quis urna. Pellentesque ut porta sapien. Maecenas semper sagittis mi sed consectetur. Ut lorem erat, lacinia nec tellus id, imperdiet dictum purus. Aenean malesuada vitae eros ut vulputate. Donec sapien metus, sollicitudin ut tellus vitae, condimentum consectetur eros. Integer eu odio leo. Proin ultricies, purus quis dignissim eleifend, lectus odio ullamcorper est, id accumsan nibh risus sed dolor. Fusce non dolor eu ligula mattis dignissim non id risus. Praesent at erat dui. Mauris mattis aliquam pretium.</p>
<p>Nulla at turpis in mauris venenatis dapibus. Etiam condimentum egestas congue. Vivamus posuere ornare nunc nec finibus. Ut ultrices neque eu diam aliquam iaculis eu non odio. Morbi tempus purus in felis tempor vestibulum. Morbi sed sapien pretium, maximus magna sed, feugiat felis. Fusce id lectus in tortor convallis porta eget sit amet massa. Fusce est ligula, pulvinar vitae elementum molestie, lobortis a elit. Sed a ligula urna. Integer pellentesque, tellus quis dignissim elementum, dui sem efficitur orci, et interdum massa ante at est. Vestibulum quis pulvinar quam. Curabitur sollicitudin, ipsum ut facilisis gravida, ex massa hendrerit orci, eu accumsan enim diam quis est.</p>
<p>In vehicula euismod rutrum. Nulla imperdiet magna vitae est sodales vestibulum. Praesent posuere justo ac mauris auctor ullamcorper. Ut rutrum magna id felis tincidunt dictum. Phasellus rhoncus condimentum enim in consequat. Mauris pulvinar velit libero, a rhoncus metus tincidunt vitae. Etiam efficitur eget diam pellentesque imperdiet. Ut efficitur ipsum a dui cursus egestas. Nulla id lacus pellentesque ex rutrum eleifend. Aliquam tincidunt egestas rhoncus.</p>
<p>Donec sit amet diam a arcu dignissim laoreet eu non augue. Nam bibendum eleifend sapien, eget luctus justo feugiat vel. Maecenas vitae consectetur ex, ut tempor urna. Donec elementum dictum laoreet. Curabitur eleifend lacus sed pretium commodo. Mauris arcu tellus, luctus eget pretium fermentum, ornare at libero. Praesent rutrum, elit et eleifend iaculis, ligula sapien fermentum ex, vel accumsan arcu augue vel lorem.</p>
<p>Praesent ipsum dolor, auctor ac dolor at, facilisis aliquet tellus. Aenean gravida turpis at varius viverra. Nullam in massa ut mi luctus iaculis. Maecenas porta mauris nibh, ut facilisis sem ultricies eu. Suspendisse vestibulum luctus pellentesque. Duis accumsan risus ut risus iaculis malesuada. Praesent sodales risus at velit elementum, in dictum nunc tempus. Maecenas accumsan tempus enim, quis tristique turpis. Nullam efficitur rutrum tortor a facilisis. Cras pulvinar eu dolor et tincidunt. Sed maximus sodales imperdiet.</p>
<p>Pellentesque elementum tellus neque, quis luctus eros placerat nec. Aenean dictum ligula sed leo tempor molestie. Pellentesque rutrum molestie quam, ac maximus odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam eu efficitur nisi. Aliquam condimentum diam vel ligula volutpat, sit amet egestas ipsum condimentum. Aenean volutpat elit quis accumsan laoreet. Mauris elementum ultrices nisl, sit amet pretium elit. Mauris ut purus a ligula convallis auctor.</p>
<p>Ut ornare dolor at risus suscipit molestie. Nunc laoreet molestie justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ullamcorper sem tortor, vitae eleifend libero consequat quis. Cras congue dictum risus. Vivamus efficitur ullamcorper cursus. Nam et ipsum quis justo tempor ultricies vel ac sem.</p>
<p>Maecenas vel commodo erat. Nullam nec molestie est. Aenean eleifend semper arcu, in consequat augue ultricies sed. Nam vehicula dictum ligula, ac laoreet libero convallis in. Nunc in elit sit amet sem egestas feugiat. Aliquam sagittis consequat dolor. Praesent condimentum varius tortor et tincidunt. Nunc diam felis, varius et elementum non, bibendum at ex. Nam bibendum vulputate justo.</p>
<p>Aliquam sed urna ut massa convallis dignissim. Sed gravida imperdiet est, sed scelerisque libero maximus id. Fusce sit amet fermentum magna. Fusce congue, enim vel lacinia molestie, magna sem bibendum diam, vel sodales lectus ipsum in arcu. Vestibulum scelerisque, tellus a facilisis facilisis, ligula arcu bibendum eros, iaculis faucibus ex eros vel magna. Ut non convallis diam, ac venenatis nisi. Nunc vel velit quis diam placerat lacinia. Phasellus laoreet dapibus convallis. Nunc sit amet faucibus purus. Nulla et sapien enim. Vivamus quis sem non quam faucibus vulputate. Nam venenatis urna neque, sed gravida tellus eleifend nec. In tincidunt dui dignissim, auctor ipsum non, varius felis. Fusce vel fringilla nisl, et porttitor velit.</p>
<p>Curabitur augue massa, molestie ac nulla id, sagittis condimentum enim. In ullamcorper velit et sapien ornare, at bibendum lorem consectetur. Pellentesque ultrices felis quis dolor luctus, nec sagittis libero suscipit. Nunc consequat leo ut tincidunt pharetra. Sed pellentesque pharetra mauris. Aenean rhoncus massa odio, et porta neque pulvinar quis. Donec pharetra metus eget lorem malesuada molestie. Nam vel cursus lorem. Mauris dui elit, fermentum eu dapibus in, volutpat ut arcu. Nunc a porttitor felis, et tempus ligula.</p>
<p>Morbi vestibulum interdum elementum. Pellentesque purus erat, posuere ac finibus id, congue eu nibh. Vestibulum placerat metus non tortor gravida, interdum pellentesque metus tincidunt. In a dui vel lectus ornare laoreet. Etiam varius elit sit amet accumsan semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut nec vestibulum est, a hendrerit ligula. Morbi nec congue sem. In at mattis orci, ut efficitur risus. Suspendisse nec luctus purus. Quisque convallis nunc nisl, non posuere dui sodales a.</p>
</div>
<img src="https://miro.medium.com/max/700/0*oYERjNNFMUQoiKJt.png"/>
<h2>Wait finish the scroll effect & Click in the button on the floor</h2>
<center>
<button id="btn-go-top" type="button">Click & Go SLOW to the TOP!</button>
</center>
Updated jsfiddle: https://jsfiddle.net/rafarolo/0zt14Lkv/ (Jun/2021)
Old link jsfiddle: https://jsfiddle.net/rafarolo/zwkesrxh/3/
Updated jsfiddle Minified: https://jsfiddle.net/rafarolo/7yj06xrk/1/
Old link jsfiddle minified version: https://jsfiddle.net/rafarolo/8orw7ak3/3/
Just change the second parameter from scrollTopTo function to refine your speed control:
// scroll to top (0) in 4 seconds e some milliseconds
scrollTo(0, 4269);
// Element to move, time in ms to animate
function scrollTo(element, duration) {
var e = document.documentElement;
if (e.scrollTop === 0) {
var t = e.scrollTop;
++e.scrollTop;
e = t + 1 === e.scrollTop-- ? e : document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if (typeof from === "object") from = from.offsetTop;
if (typeof to === "object") to = to.offsetTop;
scrollToX(element, from, to, 0, 1 / duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed <= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
function easeOutCuaic(t) {
t--;
return t * t * t + 1;
}
Minified version:
// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);
var a=document.documentElement;
if(0===a.scrollTop){var b=a.scrollTop;
++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}
b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),
"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){
function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),
f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){t--;return t*t*t+1;}
Reference:
https://stackoverflow.com/a/23844067/5626568

Working solution using Promise:
function scrollDelay(ms) {
return new Promise(res => setTimeout(res, ms));
}
document.getElementById("slow-scroll-demo-button").onclick = async function() {
for (var y = 0; y <= 4200; y += 100) {
window.scrollTo({top: y, behavior: 'smooth'})
await scrollDelay(100)
}
}
Trick to introduce delay in scrolling:
Create an async function called scrollDelay() that spends time by calling a promise
Call the scrollDelay along with scrollTo in a for loop

Override javascript to eliminate flickering

I have two javascript snippets below. They both do the job they're meant to do, except that now clicking .info in the second snippet triggers the classes being added to the body as per the first snippet, causing unwanted flickering. Is it possible to make it so that the second snippet doesn't add or remove classes? Or even combine the two somehow to avoid this issue? Thanks in advance for all help!
I have added the full code below. As you can see, if you click one of the red squares without scrolling down, there is no flicker. Once you scroll down and click on them a flicker occurs.
$(window).scroll(function () {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object'))
{
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
}
else if(current_top <= header_height && elem.hasClass('fixed-object'))
{
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
#charset "UTF-8";
/* CSS Document */
* {
margin: 0;
padding: 0;
}
body {
background: #F4F5F9;
}
.clear {
clear: both;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
.wrapper {
max-width: 1020px;
margin: 0 auto;
}
/*------------------------------------*\
MAIN OBJECT DETAILS AREA
\*------------------------------------*/
section#object, section#comparison {
background: #fff;
border-radius: 5px;
box-shadow: 0 10px 30px 0 rgba(0,0,0,0.05);
}
section#object {
min-height: 200px;
border: 1px solid #000;
}
.fixed-object {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 100;
width: 1020px;
margin: 0 auto;
border-radius: 0;
}
section#object {
height:209px;
transition: height 0.2s, width 0.2s;
}
/*------------------------------------*\
CONTENT AREA
\*------------------------------------*/
.info {
width: 17px;
height: 17px;
background: #ff0000;
display: inline-block;
text-indent: 999999px;
overflow: hidden;
background-repeat: no-repeat;
}
.info:hover {
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.info:active, .info:focus {
opacity: 0.8;
filter: alpha(opacity=80); /* For IE8 and earlier */
}
.infobox {
background: #FFF;
border: 1px solid #000;
width:300px;
z-index: 99;
border-radius: 2px;
padding: 8px 10px;
}
.infobox:after, .infobox:before {
top: 100%;
left: 80%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.infobox:after {
border-color: rgba(255, 255, 255, 0);
border-top-color: #fff;
border-width: 5px;
margin-left: -5px;
}
.infobox:before {
border-color: rgba(0, 0, 0, 0);
border-top-color: #000;
border-width: 6px;
margin-left: -6px;
}
.infobox p {
font-size: 11px;
display: inline-block !Important;
white-space: normal;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<link type="text/css" rel="stylesheet" href="bug_flicker.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<style type="text/css">
.lightbox, .infobox {
display: none;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!--/ HEADER-->
<main>
<div class="wrapper">
<!--MAIN OBJECT-->
<section id="object">
</section>
<!--/ MAIN OBJECT-->
<!--CONTENT-->
<section id="comparison">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Läs mer<div class="infobox LB2-box"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ullamcorper scelerisque arcu sed suscipit. Proin sodales enim enim, vitae ullamcorper tellus hendrerit ac.</p></div>
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra cursus sollicitudin. Integer dignissim placerat nulla, vitae molestie sem egestas at. Curabitur et mauris nisi. Integer condimentum aliquam risus venenatis cursus. Vestibulum et elit dui. Fusce sed turpis quam. Phasellus sit amet massa semper, maximus augue pulvinar, vulputate lorem. Phasellus luctus augue tortor. Sed semper sapien nec nisl blandit, sed sollicitudin quam sagittis. Praesent auctor dui et neque porta, vitae tempus dui feugiat. Vivamus maximus placerat consectetur. Donec a risus mattis, aliquam velit efficitur, venenatis massa. Etiam pellentesque molestie mi a molestie. Proin finibus lectus ac leo feugiat pretium. Cras tincidunt vel lorem ut vulputate. Quisque sit amet ornare massa.
Suspendisse convallis justo velit, sit amet dictum orci mattis ac. Sed a tellus id massa sagittis faucibus. Aenean molestie justo hendrerit, porta ligula non, iaculis urna. Sed sed quam feugiat, tristique lectus sit amet, posuere ex. Nam faucibus ultrices magna, vel tristique nisi. Nulla erat lectus, accumsan at lobortis ac, semper sit amet justo. Praesent convallis felis turpis, eget auctor libero aliquam semper.
Mauris aliquet diam fringilla ipsum auctor, nec feugiat massa tincidunt. Sed vel facilisis nisi. Suspendisse sit amet orci mattis, aliquet diam vitae, volutpat tortor. Etiam sed imperdiet metus. Nam eget porttitor erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras laoreet semper ultrices. Nunc et libero ligula. Vivamus interdum rutrum mauris. Nullam aliquam pretium nunc et ornare.
Aenean aliquam tempor nisi ut scelerisque. Mauris sagittis tortor lectus, at ornare libero imperdiet quis. Donec rutrum dictum mauris, eu eleifend neque volutpat nec. Vestibulum sodales molestie fringilla. Sed eget quam erat. Integer scelerisque volutpat urna sed convallis. Nunc mollis tempus nunc. Maecenas consequat ligula id neque malesuada, id vulputate eros lobortis. Proin aliquet fringilla massa at placerat. Praesent eu ultrices sem, vitae finibus nibh.
Pellentesque diam neque, ultrices sit amet varius quis, vulputate sed mi. Nunc nibh ante, cursus non aliquam non, iaculis sit amet turpis. Quisque molestie aliquam accumsan. Phasellus a eros neque. Phasellus at erat vel enim gravida bibendum. Nulla vel fermentum nisl. Aliquam lectus odio, elementum vel gravida at, vehicula quis tortor. In vehicula, turpis et ultricies mollis, dolor magna iaculis turpis, eu fringilla nisi nisl a diam. Nullam et pharetra diam. Quisque eleifend leo ac risus cursus, id sollicitudin odio fermentum. Duis mattis mauris erat, eu eleifend enim lobortis id. Fusce ut leo nec nibh dignissim commodo. Pellentesque sagittis, velit vitae pharetra posuere, nunc lorem pulvinar sem, eget mattis tellus odio tempor ante. Praesent a consectetur magna. Phasellus at vestibulum tortor, ut vehicula ligula.
Ut tempor rhoncus diam in consectetur. Vestibulum ex lacus, fermentum a gravida et, ultricies eget orci. Maecenas commodo risus eu purus varius hendrerit. Nam ultricies elementum magna quis vulputate. Aenean sit amet porta mauris, a mollis mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ac fringilla diam. Sed suscipit arcu vel pharetra consequat. Suspendisse blandit dapibus arcu, imperdiet mollis lorem faucibus vitae. Quisque id est et turpis euismod pharetra. Donec tempus scelerisque ullamcorper. Fusce a ipsum a lacus iaculis interdum id non massa. Fusce vestibulum elit a facilisis placerat.
Mauris eros sapien, scelerisque vitae aliquam sed, blandit ut orci. Suspendisse at dui et lectus pretium sagittis. Proin ac mi vel ligula sodales gravida. Nulla ultricies nisl massa, in vulputate massa fringilla at. Etiam id tristique leo. Quisque et mi non elit molestie eleifend et nec risus. Praesent vestibulum vestibulum ante.
Aliquam consectetur risus nec lectus efficitur, non fringilla sem ultricies. Nunc dapibus consequat ante sit amet pharetra. Nulla fermentum purus convallis magna rutrum, venenatis eleifend tellus tristique. Vivamus vel aliquet leo, a venenatis massa. Nunc tincidunt gravida dolor, ut euismod sapien mattis eget. Donec vel justo purus. Morbi rhoncus elementum elit vitae iaculis. Suspendisse imperdiet ex massa, sed sagittis quam pretium in. Donec ut scelerisque dolor. Quisque nec nunc ac tortor dapibus suscipit. Etiam auctor et lectus ac aliquet. Praesent aliquet ultricies ullamcorper. Suspendisse tincidunt lacus nec arcu pharetra, sed malesuada augue commodo. Vestibulum accumsan dui nec lectus posuere blandit. Sed a leo convallis, ullamcorper mauris quis, sodales velit. Suspendisse scelerisque ultricies dictum.
Nunc egestas sem ut augue ultricies suscipit. Aenean non pharetra purus. Maecenas nec orci diam. Etiam ultrices luctus velit, nec sagittis sapien. Morbi aliquam magna sed maximus luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum lectus dolor, placerat sit amet sem sed, suscipit ultrices dui. Nulla dictum porta arcu et sodales. Donec dictum fringilla nibh aliquam venenatis. Pellentesque vel sollicitudin erat, et fermentum lorem. Maecenas non mollis arcu, a ullamcorper enim. Phasellus nec vulputate urna. Aenean ac ligula laoreet, vestibulum nisl a, ultrices ligula. Nam at tincidunt mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac tortor porta, porta augue a, eleifend nulla.
Integer laoreet dapibus ligula, sed tincidunt odio. Praesent sed sagittis elit. Donec urna magna, viverra sit amet porttitor vel, aliquam ac risus. Mauris ac fringilla odio, a pellentesque magna. Donec ultrices sapien id felis sollicitudin, sed malesuada leo condimentum. Curabitur sit amet luctus turpis. Praesent ornare enim a finibus posuere.
</section>
<!--/ CONTENT-->
</div>
</main>
</body>
<script>
$('.infobox').hide();
$('a.info').click(function() {
console.log($(this).index('a'));
var $div = $('.infobox').eq($(this).index('a.info'));
$div.toggle();
$('.infobox').not($div).hide();
});
</script>
<script>
$(document).ready(function() {
$(".info").click(function(event){
$('html, body').animate({scrollTop: '+=0px'}, 1);
});
});
</script>
</html>
$(window).scroll(function() {
var elem = $('#object');
var header_height = (window.innerWidth <= 999) ? 50 : 100;
var header_top = elem.offset().top;
var current_top = $(this).scrollTop();
if (current_top > header_height && !elem.hasClass('fixed-object')) {
elem.addClass('fixed-object');
$('body').addClass('fixed-padding');
} else if (current_top <= header_height && elem.hasClass('fixed-object')) {
elem.removeClass('fixed-object');
$('body').removeClass('fixed-padding');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(".info").click(function(event) {
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You want to use .preventDefault(). Like so:
$(document).ready(function() {
$(".info").click(function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: '+=0px'
}, 1);
});
});

DragScroll stop event was not working?

I just try to function call into the dragScroll event. But it is not give any response. I try the following script.
$('.container').dragScroll({
stop: function() {
alert();
}
});
How can i do it.? And what is my mistake.?

I added events to the plugin.
how to use:
$('#container').dragScroll({
start: startDrag,
dragging: dragging,
stop: stopDrag
});
dragscroll.js
/*
DraggScroll is a JQuery extension for scrolling by clicking and dragging from within a container.
Author: James Climer (http://climers.com)
Released under the Apache V2 License: http://www.apache.org/licenses/LICENSE-2.0.html
Requires JQuery: http://jquery.com
Get latest version from: https://github.com/jaclimer/JQuery-DraggScroll
EDIT Emmanuel Delay: extra event handlers: 'start', 'stop', 'dragging'.
#see http://stackoverflow.com/questions/30862588/dragscroll-stop-event-was-not-working
*/
(function ($) {
$.fn.dragScroll = function (options) {
/* Mouse dragg scroll */
var x, y, top, left, down;
var $scrollArea = $(this);
$($scrollArea).attr("onselectstart", "return false;"); // Disable text selection in IE8
$($scrollArea).mousedown(function (e) {
e.preventDefault();
down = true;
x = e.pageX;
y = e.pageY;
top = $(this).scrollTop();
left = $(this).scrollLeft();
if (typeof options.start === 'function') {
options.start(e);
}
});
$($scrollArea).mouseleave(function (e) {
down = false;
// this stops the scroll, so let's also call options.stop()
if (typeof options.stop === 'function') {
options.stop(e);
}
});
$("body").mousemove(function (e) {
if (down) {
var newX = e.pageX;
var newY = e.pageY;
$($scrollArea).scrollTop(top - newY + y);
$($scrollArea).scrollLeft(left - newX + x);
if (typeof options.dragging === 'function') {
options.dragging(e);
}
}
});
$("body").mouseup(function (e) {
down = false;
if (typeof options.stop === 'function') {
options.stop(e);
}
});
};
})(jQuery);
Example:
<style>
#container {
height: 400px;
width: 500px;
border: 1px solid #000;
overflow: auto;
}
</style>
<div id="container">
<div style="width:800px;padding:10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dictum tellus nec gravida venenatis. Fusce tempor fermentum leo, ac condimentum orci gravida eget. Nam pellentesque, sapien vitae elementum posuere, libero est accumsan libero, a ultricies augue nisi eu nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin risus neque, non porta mi vehicula sed. Nam semper imperdiet libero, eget ornare mauris. Aliquam sodales congue ante nec molestie. In ac nulla vitae ante lacinia pulvinar. Morbi vehicula nisl ante, sit amet convallis massa facilisis quis. Vestibulum vulputate est a augue dictum ultricies.</p>
<p>In eget est vitae libero vulputate dictum vel ac felis. Maecenas et tortor nec felis posuere viverra ut eget elit. Phasellus eu pellentesque sapien. Morbi porttitor nulla eget libero viverra consequat. Nunc metus nisi, gravida eu elit sed, cursus malesuada orci. Phasellus tempus enim vitae arcu imperdiet porta. Vestibulum eu nisl congue, aliquam turpis quis, vulputate odio. Quisque sed rhoncus elit. Proin viverra molestie malesuada. Phasellus scelerisque tristique nisi adipiscing aliquet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque vel dictum dolor, ac congue libero. Sed adipiscing pretium massa vel imperdiet. In faucibus sed arcu eu sodales.</p>
<p>In dapibus rutrum mi, a posuere orci venenatis a. Suspendisse ligula nisl, bibendum eu vehicula eu, dictum pharetra tellus. Aenean vel mattis felis. Maecenas est tellus, aliquam in velit nec, mattis imperdiet est. Nullam mattis condimentum ante tempus eleifend. Aliquam dapibus nibh diam, non dictum erat pharetra in. Quisque posuere nulla vitae massa sagittis porta. Ut lacinia lorem vitae blandit ornare. Integer porta nunc eget nibh blandit, vel laoreet metus laoreet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean at risus justo. Proin sit amet porttitor justo. Sed augue dolor, fermentum non ornare vitae, pellentesque a turpis. Vestibulum porta posuere aliquet. Cras vel interdum ligula, vitae tempus dolor. Cras non arcu in massa bibendum vestibulum et eget leo. Phasellus felis metus, dapibus quis pharetra sed, porttitor eu risus. Proin cursus turpis non turpis posuere facilisis.</p>
<p>Maecenas venenatis massa vitae lacinia rhoncus. Suspendisse fringilla mattis enim id elementum. Pellentesque id tempus sapien, ut laoreet erat. Curabitur consectetur enim vel condimentum luctus. Duis eu sapien nunc. Nulla porta gravida nulla nec lobortis. Donec a ultricies quam, ac aliquet quam. Sed commodo luctus fringilla. Integer eu malesuada nisi, vitae laoreet turpis. Duis nec ligula sed nisi accumsan egestas. Pellentesque at volutpat nunc. Proin pretium elit sem, egestas ornare purus fermentum sit amet. Donec pharetra libero id odio molestie lacinia ut sed urna.</p>
</div>
</div>
<div id="display"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dragscroll.js"></script>
<script>
// user functions
function startDrag(e) {
// notice: this gets executed, but immediatly the event 'dragging' takes over
document.getElementById('display').innerHTML = 'Dragging started';
}
function dragging(e) {
document.getElementById('display').innerHTML = 'Dragging';
}
function stopDrag(e) {
document.getElementById('display').innerHTML = 'Dragging stopped';
}
$(document).ready(function() {
$('#container').dragScroll({
start: startDrag,
dragging: dragging,
stop: stopDrag
});
});
</script>

No such event available in your this plugin.