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)
);
}

jQuery to Javascript/Vue

I want to create a custom search box that can jump to its matches using mark.js mark.js web page.
They do have an example here:
https://jsfiddle.net/julmot/973gdh8g/
But it is written using jQuery.
I tried converting it to JS/Vue (using Quasar), but now I couldn't get it to work.
No errors, but also no highlights.
I have updated jQuery lines like:
$prevBtn = $("button[data-search='prev']")
to:
prevBtn = document.querySelector('#prev')
And these, I dont know how to convert the others, such as:
$nextBtn.add($prevBtn).on("click", function() {})
Here is my fiddle (simplified version, but not completely done yet, also make sure to click "Search" after input):
https://codepen.io/keechan/pen/JjWEYmP?editors=1111
What am I missing? Help please!

I rewrote their jQuery example using pure JavaScript.
You should be able to compare the two examples to see how the various jQuery functions translate to JavaScript and then implement them into your Vue project.
https://jsfiddle.net/75qyu3j8/
I tried to keep the variable names the same so it is easier to understand.
document.body.onload = function() {
// the input field
var $input = document.querySelector("input[type='search']"),
// clear button
$clearBtn = document.querySelector("button[data-search='clear']"),
// prev button
$prevBtn = document.querySelector("button[data-search='prev']"),
// next button
$nextBtn = document.querySelector("button[data-search='next']"),
// the context where to search
$content = document.querySelector(".content"),
$contentMark = new Mark($content),
// jQuery object to save <mark> elements
$results,
// the class that will be appended to the current
// focused element
currentClass = "current",
// top offset for the jump (the search bar)
offsetTop = 50,
// the current index of the focused element
currentIndex = 0;
/**
* Jumps to the element matching the currentIndex
*/
function jumpTo() {
if ($results.length) {
var position,
$current = $results[currentIndex];
$results.forEach($result => $result.classList.remove(currentClass));
if ($current) {
$current.classList.add(currentClass);
position = $current.offsetTop - offsetTop;
window.scrollTo(0, position);
}
}
}
/**
* Searches for the entered keyword in the
* specified context on input
*/
$input.addEventListener("input", function() {
var searchVal = this.value;
$contentMark.unmark({
done: function() {
$contentMark.mark(searchVal, {
separateWordSearch: true,
done: function() {
$results = $content.querySelectorAll("mark");
currentIndex = 0;
jumpTo();
}
});
}
});
});
/**
* Clears the search
*/
$clearBtn.addEventListener("click", function() {
$contentMark.unmark();
$input.value = ""
$input.focus();
});
/**
* Next and previous search jump to
*/
$nextBtn.after($prevBtn);
function prevNextHandler() {
if ($results.length) {
currentIndex += (this.dataset.search === "prev" ? -1 : 1);
if (currentIndex < 0) {
currentIndex = $results.length - 1;
}
if (currentIndex > $results.length - 1) {
currentIndex = 0;
}
jumpTo();
}
}
$nextBtn.addEventListener("click", prevNextHandler);
$prevBtn.addEventListener("click", prevNextHandler);
};
mark {
background: yellow;
}
mark.current {
background: orange;
}
.header {
padding: 10px;
width: 100%;
background: #eee;
position: fixed;
top: 0;
left: 0;
}
.content {
margin-top: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script>
<div class="header">
Search:
<input type="search" placeholder="Lorem">
<button data-search="next">↓</button>
<button data-search="prev">↑</button>
<button data-search="clear">✖</button>
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eu ullamcorper orci, eget porttitor justo. Aliquam id sollicitudin elit. Nulla in sodales ipsum. Donec vulputate venenatis magna. Vestibulum sit amet leo lacinia, cursus lectus in, gravida
metus. In ultricies sed tortor non pellentesque. Mauris quis tempor neque. Donec nec sagittis magna. Integer fringilla posuere metus eu mollis. Ut ac porta metus. Duis sed lacinia metus. Nunc malesuada iaculis risus vitae bibendum.
</p>
<p>
Vivamus posuere condimentum leo eu hendrerit. Pellentesque placerat iaculis ante a rhoncus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu ipsum ac magna congue congue sed maximus tortor. Vivamus id odio elementum, vehicula nunc
ut, efficitur felis. Nullam hendrerit velit libero, gravida porttitor tortor ullamcorper eu. Ut ut lectus non enim sagittis aliquam quis in orci. Donec a arcu eu eros cursus cursus. Donec dictum dignissim tellus, dictum egestas purus pellentesque
sed.
</p>
<p>
Vestibulum eu ornare urna, nec aliquam lectus. Phasellus eu odio sapien. Vestibulum eu turpis at lorem sagittis posuere. Quisque tellus nunc, facilisis id lacus nec, ornare rhoncus elit. Vivamus vehicula eros a condimentum venenatis. Sed orci massa, pulvinar
sed erat nec, pellentesque suscipit leo. Mauris lobortis tincidunt nunc, sed tempus ex congue vitae. Curabitur lobortis mauris in ex malesuada, quis vehicula neque lobortis. Curabitur aliquam porttitor tellus eget tempus. Donec maximus tempus tristique.
Aliquam tincidunt odio dictum, scelerisque ipsum ut, facilisis quam. Ut nec malesuada neque.
</p>
<p>
Proin felis eros, tincidunt vitae scelerisque sit amet, dictum nec ante. Praesent tincidunt ac lacus nec elementum. Vivamus sed gravida purus, sed efficitur tortor. Nulla non molestie arcu. Sed tincidunt consectetur ligula sed lobortis. In non sapien
ac urna lacinia placerat sed nec lacus. Aenean lobortis tincidunt sapien a hendrerit. Quisque eu turpis accumsan nisl blandit efficitur.
</p>
<p>
Nam sit amet pellentesque est. Sed ligula turpis, ultricies sit amet mattis elementum, tristique non risus. Phasellus at congue ex. Proin nisi leo, vestibulum vitae accumsan in, imperdiet id dolor. Quisque at blandit nisl. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc eget metus augue. Morbi faucibus venenatis sapien, fermentum porttitor felis pharetra a. Nam interdum nibh tortor, quis maximus turpis blandit eget. Praesent in feugiat neque, sed
vulputate quam. Curabitur erat quam, efficitur et congue quis, iaculis euismod libero. Quisque odio sapien, efficitur non mauris ac, tincidunt condimentum turpis.
</p>
<p>
Maecenas dapibus aliquam vehicula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent convallis viverra leo quis porta. Sed sit amet porttitor quam. Fusce nec risus non augue consectetur ultricies. Aliquam
elit lorem, tincidunt ac dolor vel, vulputate consectetur ex. In hac habitasse platea dictumst. Sed eget nisl aliquam, cursus odio nec, commodo lorem. Nulla mollis tortor eu odio rutrum vulputate. Donec condimentum molestie mauris, nec sodales nisi
volutpat aliquam. Nulla mollis libero sed nibh volutpat, ac mollis elit tincidunt. Vestibulum cursus velit vitae felis aliquam ultricies. Donec vehicula dictum feugiat. Vestibulum volutpat sollicitudin sagittis.
</p>
<p>
Aliquam consequat, diam eu ullamcorper porta, diam eros rhoncus turpis, in rutrum sem diam a risus. Duis lacinia velit sed ante feugiat venenatis. Aenean orci leo, dictum non finibus nec, dignissim quis eros. Nullam sit amet orci ac purus blandit commodo
sit amet eget neque. Sed pellentesque dictum tortor. Ut dui erat, tempus in odio in, aliquet convallis mi. Morbi efficitur justo ante, quis ultricies turpis suscipit ac. Sed sit amet nisl rutrum, laoreet mauris id, ullamcorper orci. In facilisis nisi
eget fringilla imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi ut ultricies dui. Pellentesque elit urna, imperdiet sed congue eget, hendrerit sed urna.
</p>
<p>
Proin vel hendrerit nulla. Vivamus vehicula nibh nec lorem blandit, quis aliquam ipsum suscipit. Nulla at vestibulum felis. Aenean ac nibh eget enim molestie pulvinar. Duis nulla justo, tristique id nulla nec, faucibus imperdiet arcu. In vel pretium dui,
at lobortis sapien. Phasellus ullamcorper id enim eget dictum. Ut imperdiet rutrum est a rutrum. Curabitur eget dignissim tellus. Fusce tempus leo nisl, vitae auctor diam feugiat sit amet. Vestibulum accumsan justo eget odio imperdiet, consectetur
efficitur ex dapibus.
</p>
<p>
Sed pharetra odio a nibh pharetra rutrum. Suspendisse ut ullamcorper lectus. Donec ipsum mauris, congue et lobortis sit amet, ultricies ac tellus. Sed nisi risus, condimentum at varius quis, condimentum ac velit. In condimentum, magna sed ornare eleifend,
dolor nulla mollis felis, quis feugiat elit turpis non ipsum. Etiam aliquam est imperdiet dolor rutrum, at varius leo sodales. Morbi quis iaculis metus.
</p>
<p>
Maecenas auctor nec ligula ac luctus. Nam sit amet euismod mauris. Donec et diam sit amet eros efficitur tempor. Mauris non erat sit amet nunc interdum pulvinar. Sed luctus hendrerit justo eget pulvinar. Cras non arcu sed ligula faucibus pulvinar. Sed
egestas risus nisl. Duis quis arcu tempus, cursus erat ac, gravida enim. Cras et condimentum ante. Nullam eleifend egestas velit, quis semper est imperdiet non. Donec quis purus varius, placerat mi et, dictum lorem. Sed quis finibus nisi, vitae molestie
metus. Donec lobortis eros quis vestibulum vulputate.
</p>
</div>

Wrap a div around multiple paragraph elements of certain height/lines

I have a div of a fixed width: 580px which can contain paragraph elements of different counts (can be 10, can be 100). Each paragraph will have contents/text of a few hundred words.
What I want to achieve is to wrap the p elements around a div (with a class) after certain lines of text. Here is what I have done so far and cannot figure out a way to identify the start/end of the wrap.
It would also help if there is a way to count lines that are "not" in p elements. For example, the div lipsum has an additional span or other divs, what will be an approach to handle that?
function Wrap() {
var heightCount = 0;
$("#lipsum p").each(function() {
heightCount += $(this).height();
if (heightCount > 500) {
console.log('reached 500');
//wrap code here for e.g.
//<div class="test">...[p elements with proper closing tags that are under 500 in line]...</div>
heightCount = 0;
}
})
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn" onclick="Wrap()">Test</button>
<div id="lipsum" style="width:580px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed risus at orci elementum consequat. Suspendisse laoreet rhoncus dignissim. Aliquam a ultrices orci, in elementum nibh. Aliquam mollis erat at vehicula pellentesque. Nunc suscipit, leo
at convallis lobortis, odio ipsum euismod sapien, auctor accumsan velit eros non risus. Cras sagittis nisi non orci finibus porta. Sed finibus ac eros eu tincidunt. Nam viverra egestas augue vestibulum elementum. Suspendisse convallis felis sodales,
ornare neque ut, elementum dui. Mauris ac orci mattis, tristique nisi quis, ultricies urna. In tincidunt, dolor vitae euismod mattis, lorem arcu placerat velit, quis auctor est est et sem. Aenean convallis finibus posuere. Sed feugiat orci a lacinia
efficitur. Ut semper, purus quis convallis vehicula, mi risus rhoncus arcu, et feugiat neque turpis non tellus.
</p>
<p>
Mauris dapibus felis leo, vitae vestibulum purus feugiat sit amet. Fusce ac dapibus nunc. Etiam congue mi neque. Maecenas eget blandit turpis. Suspendisse volutpat, urna eu facilisis congue, elit felis faucibus velit, venenatis semper sem sem ut ante.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent blandit congue sapien. Curabitur non fermentum felis, sit amet auctor nunc. Cras id tellus nunc.
</p>
<p>
In lacinia lectus nec quam dapibus eleifend. Phasellus iaculis eget massa non aliquam. Cras interdum gravida hendrerit. Suspendisse rhoncus pretium erat non malesuada. Fusce sit amet finibus est. Phasellus quis dapibus orci. Nunc iaculis felis odio, et
dictum leo mollis sed. Morbi ultrices turpis at mi pellentesque, sit amet consectetur tortor volutpat. Mauris ac nunc ac nunc pellentesque lacinia. Duis at ligula tristique, maximus sapien sit amet, pulvinar neque.
</p>
<p>
Nulla efficitur bibendum nunc, in efficitur nisi vehicula id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque purus purus, molestie id dignissim id, consequat a diam. Aliquam dictum eget purus et lobortis.
Vivamus vitae blandit quam. Suspendisse quis enim posuere leo aliquam faucibus in quis diam. Nullam efficitur aliquam velit vel feugiat. Aenean at porttitor neque. Nam egestas ullamcorper nisl, quis aliquam ligula convallis sed. Donec et dui lectus.
Ut dictum sapien nec dolor convallis tincidunt. Vivamus ut neque sed ligula lacinia mollis. Integer turpis dolor, fringilla quis orci at, finibus lacinia urna. Morbi rutrum lobortis finibus. Cras fringilla scelerisque elit vitae vehicula.
</p>
<p>
Cras dignissim mollis magna, a viverra ante dignissim et. Vivamus malesuada neque eget arcu ultricies, non feugiat metus laoreet. Praesent rutrum gravida dolor sed fringilla. Sed at orci nec neque bibendum feugiat. Vivamus tincidunt ex nunc, ac efficitur
nibh pharetra placerat. Vestibulum mi lorem, imperdiet vitae dictum tincidunt, pellentesque a diam. Etiam vestibulum dolor sit amet gravida elementum. Duis consectetur nunc lectus.
</p>
<p>
Maecenas mi elit, lobortis nec lectus nec, accumsan pulvinar est. Duis metus ipsum, fermentum a tortor nec, lobortis commodo est. Ut lacinia magna a tellus feugiat, ac tincidunt ligula ultricies. Nam congue turpis et leo laoreet porttitor. Donec luctus
eget nibh vel ultricies. Aliquam erat volutpat. Mauris vitae sapien id massa faucibus venenatis ac porttitor quam. Morbi eu ligula nec felis pharetra tempor.
</p>
<p>
Vivamus ultrices vel augue sed aliquet. Praesent egestas nulla vel bibendum auctor. Vivamus varius nunc in metus aliquet, sit amet fermentum dui rutrum. Pellentesque volutpat quis nulla ut sodales. Duis eu pulvinar leo. Nam venenatis aliquam orci ac accumsan.
Vivamus sollicitudin a nulla in facilisis. Pellentesque eget lectus gravida tortor porta molestie in et ligula. Phasellus sed lacus nisi.
</p>
<p>
Nulla augue sem, tempor quis mauris vel, accumsan accumsan odio. Aliquam faucibus pharetra velit aliquet placerat. Mauris posuere suscipit quam non venenatis. Sed hendrerit dolor sit amet ligula consequat tempor. Sed vel luctus magna. Duis bibendum ex
in odio aliquam, mattis consequat mi sodales. Morbi iaculis placerat purus, eu tincidunt purus gravida ac. Fusce sed mi lectus. Nulla orci quam, elementum vitae lacus eleifend, vulputate vehicula purus. Integer metus erat, imperdiet vitae viverra
nec, ultricies et est. Vestibulum auctor leo at euismod ullamcorper. Sed feugiat justo vel ipsum molestie, at sagittis lectus finibus. Morbi a augue turpis. Vestibulum nec erat nec eros vehicula tincidunt.
</p>
<p>
Proin iaculis, lectus elementum ornare tempor, metus turpis fringilla metus, eu bibendum ligula sapien eget ligula. Etiam sit amet laoreet velit. Phasellus et imperdiet orci. Sed vestibulum dictum tellus vitae ultrices. Suspendisse varius nulla eu mi
semper, vitae molestie nunc auctor. Ut tempus tincidunt luctus. Sed tempus metus odio, ut eleifend magna venenatis nec. Quisque aliquet diam mi, vel porttitor tortor congue eget. Proin elementum felis id risus maximus finibus. Fusce sed volutpat risus.
Nunc ornare laoreet dolor at vulputate. Ut mauris sapien, aliquam commodo metus et, accumsan varius erat. Nunc condimentum tortor at velit interdum, et iaculis neque vulputate.
</p>
<p>
Aliquam non consectetur risus. Integer quis quam id eros malesuada pulvinar. Sed vitae orci auctor, aliquet odio sit amet, ornare risus. In hac habitasse platea dictumst. Pellentesque dapibus semper ipsum, eget cursus arcu iaculis in. Quisque efficitur
nunc dui. Sed posuere sodales mauris, ac iaculis sem malesuada ut. Vivamus quis magna in libero suscipit scelerisque pellentesque commodo urna. Pellentesque quis purus maximus, scelerisque lacus vitae, facilisis urna. In hac habitasse platea dictumst.
Suspendisse quis aliquam arcu. Vivamus maximus pulvinar lacus vitae suscipit. Donec iaculis dictum ante, ut scelerisque enim pulvinar ac. Curabitur egestas eget elit ac sagittis. Nunc nec enim viverra, lobortis nunc non, pellentesque mauris.
</p>
</div>
UPDATE:
With the help of solution provided by #ControlAltDel I was able to modify the original Wrap function to fulfill my requirements by using wrapAll in the following two ways:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
//var firstDivP = 0;
const pageHeight = 200;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
if ($(p[i]).offset().top > startHeight + pageHeight) {
$(".wrapthis").wrapAll("<div class='main'></div>")
//lastDivP = i;
startHeight = $(p[i]).offset().top;
$(p).removeClass("wrapthis");
}
}
}
And:
function Wrap() {
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var heightCount = 0;
for (var i = 0; i < p.length; i++) {
$(p[i]).addClass("wrapthis");
heightCount += $(p[i]).height();
if (heightCount > 230) {
$(".wrapthis").wrapAll("<div class='main'></div>")
$(p).removeClass("wrapthis");
heightCount = 0;
}
}
}
I think this can further be improved but I got the results that I wanted.

Like I said, height is much easier. You can just get the offsets of your p's
var x = document.getElementById("lipsum");
var p = x.querySelectorAll("p");
var startHeight = 0;
var firstDivP = 0;
const pageHeight = ...;
for (var i = 0; i < p.length; i++) {
if ($(p[i]).offset().top > startHeight + pageHeight) {
//put a div around the preceeding paragraphs. this means from firstDivP to i - 1
firstDivP = i;
startHeight = $(p[i]).offset().top;
}
}
This is actually much better than counting lines (in my opinion :)), as you cannot put half of a paragraph in a div.

ajax page loading content having history implementation AND hashtag functionality

I'm extending functionality based on ajax loader like this
cats loader and this mia loader
I can't seem to smash a bug if I have pages using anchors like
Contacto
Ajax pages load like this, with (kind of because retrieves from json) target page on data-
//<a data-mia="home" href="/home">Home</a>
if ( el.getAttribute('data-mia') in pages ){
el.addEventListener('click', clickHandler, true);
The scroll stops in the middle instead going fully to bottom. I believe because popstate is fired.
I can have the fwd and back buttons functionality and broke hashtags or viceversa but I'm unable to do both. Can't we do that by 2020?
This some things I tried, commented out:
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
//console.log(history.state);
// if prevents hashes/anchor scroll navigation in same url bugging
// var w = window.location+"";
// if (!w.lastIndexOf('#') > 0)
updateContent(event.state);
});
Adding this I also tried but seems not the way or I'm missing how to combine with the correct previous:
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
event.preventDefault();
// nasty hack #footer for contact link.
// if (window.location.lastIndexOf('#footer') > 0)
document.querySelector('#footer').scrollIntoView();
}, false);
Right now with these 2 like that, anchors and ajax load works, but fwd/back are bugged when #hashes involved. Like this:
Navigate: /page1 /2 /2#footer /3
Back: /3 /2#footer (not going to anchor) /2 (goes here to anchor) ...
I'd prefer not to resort to onclick event like
<a onclick"js:goto('footer')" href="#footer">Contacto</a>
Following a full snippet example.
var pages = [];
var home_title = $(document).attr('title');
var home_meta_desc = $('meta[name="description"]').attr('content');
pages = {
"1": {
"title": "title 1 ",
"meta_desc": "meta 1",
"file": "1 file"
},
"2": {
"title": "title 12 ",
"meta_desc": "meta 12",
"file": "12 file"
},
"3": {
"title": "title 3 ",
"meta_desc": "meta 3",
"file": "3 file"
},
"4": {
"title": "title 4 ",
"meta_desc": "meta 4",
"file": "4 file"
}
};
els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
if (el.getAttribute('data-mia') in pages) {
el.addEventListener('click', clickHandler, true);
}
});
function updateContent(data) {
document.querySelector('#one').scrollIntoView();
//$( "#one" ).fadeOut(); //
$("#one > .inner").hide();
console.log("updating content", data);
if (data == null) {
console.log('home content triggered updt content');
$(document).prop('title', home_title);
$("meta[name='description']").attr("content", home_meta_desc);
$('#one').text(data.file); //$( "#one > .inner" ).fadeIn(100).load( "blog/home.html " );
return;
}
$(document).prop('title', data.title);
$("meta[name='description']").attr("content", data.meta_desc);
$('#one').text(data.file); //$("#one > .inner").fadeIn(300).load("blog/" + data.file + ".html");
}
// Load some mock JSON data into the page
function clickHandler(event) {
var cat = event.target.getAttribute('href').split('/').pop(),
data = pages[cat]; // || null; // In reality this could be an AJAX request
console.log("clickHandler data:", data);
updateContent(data);
// Add an item to the history log
history.pushState(data, event.target.textContent, event.target.href);
return event.preventDefault();
}
// Revert to a previously saved state
window.addEventListener('popstate', function(event) {
console.log('popstate fired!');
//console.log(history.state);
// if prevents hashes/anchor scroll navigation in same url bugging
// var w = window.location+"";
// if (!w.lastIndexOf('#') > 0)
updateContent(event.state);
});
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
event.preventDefault();
// nasty hack #footer for contact link.
// if (window.location.lastIndexOf('#footer') > 0)
document.querySelector('#footer').scrollIntoView();
}, false);
// Store the initial content so we can revisit it later
//console.log("hist pre", history.state);
history.replaceState(null, document.title, document.location.href);
//console.log("hist post ", history.state);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="nav">
<a data-mia="1" href="/1">Home</a>
<a data-mia="2" href="/2">Manual</a>
<a data-mia="3" href="/3">Not only 3</a>
<a data-mia="4" href="/4">Fotos</a>
Contacto
<!-- onclick="document.querySelector('#footer').scrollIntoView({ behavior: 'smooth' })" -->
</nav>
<section id="one">
<div class="inner">
server load content['body'];
</div>
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sollicitudin nunc vel libero malesuada semper. Praesent porttitor tincidunt finibus. Morbi elementum massa vitae quam eleifend, eget dignissim diam tempus. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Morbi non iaculis nunc. Cras ac sollicitudin erat, nec pharetra ipsum. Proin in condimentum est, eget ullamcorper orci. Cras accumsan ante leo, et sodales orci tempor sed. Pellentesque feugiat ac
urna quis rhoncus. Pellentesque convallis lorem libero, et tincidunt nibh varius ac. Maecenas magna urna, mattis at aliquam semper, hendrerit sed libero. Sed feugiat risus mi, ut tempor justo sodales in. Duis justo diam, viverra eu sodales nec, accumsan
non ex. Fusce sed suscipit sem. Donec a nibh suscipit, blandit felis vitae, consectetur metus. Maecenas faucibus odio id vulputate accumsan. Fusce porta non enim vel rutrum. Vestibulum ullamcorper fermentum eleifend. Proin ullamcorper placerat purus sed
tempor. Suspendisse suscipit suscipit urna quis placerat. Maecenas at justo pulvinar, varius nunc non, dictum justo. Curabitur in mollis tortor, at consequat ante. Duis commodo tellus neque, id molestie dui pellentesque ut. Quisque nec felis quis nulla
sollicitudin finibus. Fusce mattis mauris quis est pulvinar, sed interdum nisl pharetra. Morbi dictum, mi vitae viverra rhoncus, nibh ex varius magna, vel tincidunt erat odio ultrices tellus. Maecenas feugiat nibh quis lectus sodales, vel fringilla nulla
tincidunt. Phasellus condimentum rhoncus feugiat. Nam vel condimentum purus, et venenatis odio. Nam nisl tortor, faucibus in egestas vel, lacinia quis massa. Curabitur vel consectetur leo. Mauris sed imperdiet nunc. Nam enim eros, accumsan sit amet pulvinar
id, bibendum sit amet neque. Ut magna nulla, lobortis in imperdiet et, sagittis at enim. Etiam malesuada eu felis id consectetur. Nulla libero eros, fringilla ac consectetur non, efficitur a massa. Praesent ornare, ex id vulputate suscipit, dolor neque
eleifend magna, a posuere tellus justo sollicitudin massa. Pellentesque at mollis magna, at dapibus orci. Suspendisse sagittis libero quis augue accumsan euismod ut a arcu. Nulla sit amet nulla at augue imperdiet rhoncus id a mi. Morbi eu elementum augue,
eget luctus ex. Vivamus neque neque, tristique at bibendum et, posuere vel ligula. Vestibulum nec scelerisque erat, at fermentum massa. Donec et nulla rhoncus, ullamcorper enim vitae, convallis odio. Etiam consequat mauris leo, gravida consequat ex porta
vel. Mauris sed dignissim risus. Sed risus tellus, ullamcorper eu neque quis, rhoncus pulvinar massa. Suspendisse arcu tellus, varius sed luctus vel, viverra vel ex. Nullam ac mi eros. Proin ac volutpat orci, quis ornare augue. Donec a ultrices nunc.
Curabitur at aliquet augue. Aenean pharetra placerat sem. Donec blandit euismod ipsum, a cursus lorem fringilla ut. Nulla sed feugiat metus. Nam mollis, massa vel viverra lobortis, odio purus convallis mauris, ac accumsan sem turpis eu urna. Aliquam vel
lacus non dolor tempus lacinia in eget ante. Phasellus congue erat eu interdum luctus. Sed non sapien finibus, porta augue quis, luctus sapien. Praesent euismod porta nisi, nec volutpat metus hendrerit sed. Aenean gravida sed sem in consequat. Donec non
nisi euismod, fermentum nibh bibendum, pellentesque lorem. Vestibulum at placerat nulla. Ut sodales nulla at tincidunt blandit. Nulla non elit non nisl aliquet luctus. Nam lacinia justo ac ipsum finibus, non pellentesque ante hendrerit. Duis auctor auctor
tincidunt. Morbi porta odio id arcu tristique, vel finibus felis tristique. Nulla maximus ullamcorper augue, ut efficitur enim sagittis at. Fusce vitae lorem mi. Maecenas ultrices nisl et nibh feugiat vehicula. Ut dignissim placerat arcu, pellentesque
varius tortor. Quisque egestas massa dui. Vestibulum finibus interdum est, a porttitor diam scelerisque at. Donec egestas dui sed orci consectetur, quis tincidunt dolor lobortis. Duis mollis leo sed velit varius, ut laoreet turpis accumsan. Sed ac neque
eu nisl porta eleifend. In turpis urna, dignissim at convallis vel, luctus nec lectus. Nullam in mi laoreet, euismod urna ut, sagittis libero. Nam iaculis, metus vehicula tempus cursus, arcu turpis imperdiet orci, id posuere nulla mi vel dui. Aenean tempus
sit amet ligula vel ultricies. Quisque ac tortor bibendum sapien consectetur blandit in at felis. Vivamus consectetur velit tincidunt, eleifend augue vel, gravida quam. In at sodales purus. Aenean pulvinar sapien at ante viverra scelerisque. Duis nulla
diam, efficitur sit amet enim a, ornare tempus libero. Maecenas vitae lacinia ipsum. Nunc elementum mollis consequat. Duis dapibus vehicula purus, ac rhoncus diam interdum et. Quisque lacinia sit amet elit non ornare. Ut at tellus aliquam, sodales dui
sed, placerat leo. Aliquam erat volutpat. Nunc interdum egestas lacus sit amet eleifend. Donec ultrices, diam vitae imperdiet dignissim, metus purus accumsan quam, eget vehicula lorem diam rhoncus magna. Vestibulum ante libero, aliquet fringilla pretium
at, ultricies sed massa. Pellentesque vulputate ut nisl a egestas. Aliquam faucibus est et ligula ultrices, vitae tempor enim fringilla. Sed nunc nulla, lobortis in leo eu, sollicitudin vestibulum eros. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Donec a erat vel lacus porttitor euismod rhoncus sit amet diam. Suspendisse pharetra dui quis tempor commodo. Cras tristique, ligula non venenatis sagittis, sapien justo consectetur nisi, ac suscipit sem turpis in nisi.
Maecenas leo lacus, lobortis a suscipit at, fermentum sit amet lacus. Nam mattis, augue vitae consectetur dapibus, leo lacus consequat mi, at placerat tellus orci sed nisi. Donec imperdiet vehicula metus vel venenatis. Sed finibus a tellus eu laoreet.
Mauris mattis magna tellus, quis lobortis lacus facilisis eget. Sed eu luctus ante, a porttitor est. Nunc et lobortis lacus. Duis eu volutpat lectus, et convallis nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Phasellus condimentum auctor tortor, id molestie libero tincidunt sed. Duis vitae felis sit amet tellus malesuada gravida congue in mauris. Mauris rutrum placerat tincidunt. Suspendisse cursus pharetra finibus. Nulla laoreet turpis ac ante luctus, vitae
luctus turpis pharetra. Duis a congue ligula. Cras commodo urna sit amet ante maximus iaculis. Duis sollicitudin lobortis faucibus. Etiam mauris sem, blandit at finibus eu, congue sed felis. Vivamus aliquam massa eget turpis fermentum ornare. Sed lobortis
aliquet est, eget fermentum lorem sagittis at. Suspendisse dui risus, interdum eu massa vel, fermentum iaculis mi. Nullam sed quam ut quam pretium mattis. Donec vel ornare nisi. Morbi dapibus arcu id gravida ultrices. Donec ullamcorper metus id ex volutpat
porta. Donec sollicitudin ante pharetra orci rutrum hendrerit pellentesque vel nibh. Nulla pharetra imperdiet mi, non fringilla neque interdum in. Nam fermentum augue vitae facilisis feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Nunc imperdiet mi eget quam tristique aliquam. Phasellus vel semper nibh, in imperdiet justo. Maecenas efficitur pretium erat, quis fringilla magna malesuada ac. Etiam pretium cursus vulputate. Sed sit amet euismod ante. Aliquam
interdum nulla sit amet lacus gravida, ac malesuada libero ullamcorper. Ut volutpat enim a elit pharetra, sit amet efficitur dui porttitor. Nam erat orci, elementum eu fermentum nec, tempor id odio. Morbi id imperdiet leo, sit amet ultrices diam. Maecenas
sed accumsan tortor, ut sollicitudin neque. Nulla mi nunc, egestas in ex at, cursus finibus ligula. Sed bibendum porttitor lectus a ornare. Pellentesque augue tellus, rhoncus sed molestie a, hendrerit et dolor. Donec malesuada pretium libero et cursus.
Nunc tristique molestie orci, vitae lacinia augue. Maecenas molestie porttitor dui nec blandit. Pellentesque et pulvinar diam, eget vehicula neque. In quis ligula sit amet nisl condimentum ornare sit amet eu purus. Donec et commodo augue, nec volutpat
nisi. Nulla ullamcorper et libero id viverra. Aliquam lobortis, libero sit amet maximus faucibus, sapien nisi imperdiet enim, quis fermentum nulla velit eu ipsum. Sed non urna at quam imperdiet rutrum sed in leo. Curabitur at lectus condimentum, maximus
augue at, bibendum tellus. Nulla varius eros facilisis, pretium ante at, dignissim urna. Ut in malesuada diam. Fusce a nulla lacinia, tincidunt dolor vitae, luctus eros. Cras consequat a purus quis elementum. Quisque finibus fermentum cursus. Vestibulum
bibendum, purus id vestibulum pulvinar, nulla ante ullamcorper nisl, vitae dictum dolor ipsum in neque. Sed arcu massa, aliquet lacinia magna ac, aliquet finibus ex. Nam imperdiet dignissim turpis at laoreet. Proin nisl felis, varius sed facilisis ac,
maximus sit amet ante. Ut accumsan erat id iaculis condimentum. Curabitur consectetur ultricies lorem vel dignissim. Sed rutrum ante felis, vel venenatis massa pulvinar at. Sed consectetur sed erat vitae accumsan. Maecenas malesuada neque a lorem fringilla,
sed elementum quam posuere. Sed interdum tempus nulla at cursus. In non tristique est. Nulla bibendum purus lorem, non consequat nibh feugiat sit amet. Mauris ultrices enim eros, eu ornare est molestie molestie. Duis in ipsum ut augue rutrum semper volutpat
ultrices nulla. Phasellus gravida tempus nisi eu luctus. Cras volutpat, massa eu facilisis accumsan, dui turpis ullamcorper ligula, eget porta lectus purus id odio. Duis nulla felis, dictum ac nisl ut, aliquet cursus urna. Curabitur metus mi, iaculis
nec sapien in, aliquet dapibus metus. Nunc a risus semper orci ultrices venenatis facilisis eu mi. Mauris sodales aliquet neque eu tempor. Nulla in nisl lacinia, ultricies arcu placerat, tincidunt nunc. Quisque rutrum, urna id dictum tincidunt, purus
neque aliquam ex, nec accumsan ante metus et risus. Quisque facilisis, nisi viverra accumsan dignissim, orci urna fringilla turpis, quis tempor lorem arcu vel risus. Ut sit amet finibus tellus, vel congue nunc. Etiam sit amet bibendum nisl. Aliquam nec
rutrum purus. Sed eget nunc eget justo venenatis accumsan. Fusce vel est semper, rutrum orci ac, ullamcorper orci. Donec in ornare urna. Sed sollicitudin maximus ante, eget finibus lacus pharetra sed. Ut interdum, nulla ultricies euismod mollis, tortor
lorem accumsan ex, sit amet pharetra ante urna id libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium,
dictum sapien nec, tincidunt eros. Nunc a sagittis nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl
dolor, dictum eu justo vel, luctus euismod erat. Nunc imperdiet odio id turpis auctor scelerisque.
<hr>
<section id="footer">
<br>
<div class="inner">
I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
<br> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean facilisis non purus at pulvinar. Fusce consectetur vestibulum purus. Ut finibus justo pretium, dictum sapien nec, tincidunt eros. Nunc a sagittis
nulla. Ut ac rhoncus libero. Aliquam egestas laoreet felis in volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu ex nibh. Donec ac diam eget leo venenatis porta. Vivamus nisl dolor, dictum eu justo vel, luctus euismod erat.
Nunc imperdiet odio id turpis auctor scelerisque.
<hr> I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot I'm a foot
</div>
</section>

I noticed that for all your links you execute the below code.
els = document.querySelectorAll('[data-mia]');
els.forEach(function(el) {
if (el.getAttribute('data-mia') in pages) {
el.addEventListener('click', clickHandler, true);
}
});
The clickHandler updates the history, hence when you navigate back the history contains the previous entries. But on the click of #footer the history is not updated, possibly this could be the reason for the issue you are facing.
Updating my answer.
I see you have used document.querySelector('#one').scrollIntoView(); assuming this is for scrolling to the top of page.
I suggest you use
// This prevents the page from scrolling to the previous position.
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
// scrolled to the top
window.scrollTo(0,0);
Use this for the IE/Edge
var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
setTimeout(function(){ window.scrollTo(0, 0); }, 300);
// you need to scroll up once the page is loaded, you may need to change the timeout
}
with this, you would need to change the below listener as well.
window.addEventListener('hashchange', function() {
console.log('The hash has changed!');
//event.preventDefault();
// nasty hack #footer for contact link.
if (window.location.hash ==='#footer')
document.querySelector('#footer').scrollIntoView();
}, false);
This will prevent the listner from scrolling to the footer when "#footer" not in the location.
Hope this helps.

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