We Keep Coding

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>

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

AngularJS Material $mdSticky is not working

When I try to stick the md-toolbar in top position its not working properly. I created a custom directive using $mdSticky service in AngularJS.
var app=angular.module('app',['ngMaterial']);
app.controller('test',function(){
});
app.directive('sticky', Sticky)
function Sticky($mdSticky) {
return {
restrict: 'A',
link: function (scope, element) {
$mdSticky(scope, element);
console.log('log sticky..');
}
}
}
<html ng-app="app">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.css" rel="stylesheet"/>
</head>
<body>
<div>
<md-toolbar class="md-hue-2" md-whiteframe="2" sticky>
<h1>testing sticky</h1>
</md-toolbar>
<md-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tortor magna, ornare ut ipsum vitae, venenatis fermentum est. Vestibulum viverra augue at venenatis rutrum. Duis iaculis et mi eget pharetra. Curabitur a faucibus est. Nulla fermentum imperdiet eleifend. Donec maximus rutrum erat, sit amet dictum diam tempor vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean eget lacus tincidunt, eleifend orci non, finibus lacus. Proin blandit nisi libero, non vestibulum nunc viverra a. Fusce efficitur risus non sem dignissim, ut varius odio pulvinar. Quisque et orci eleifend, lobortis erat vitae, feugiat elit. Vestibulum laoreet auctor mauris, sit amet faucibus felis. Phasellus pretium dui ipsum, a posuere augue tempus vitae. Ut ornare, nulla in vestibulum egestas, velit tortor accumsan diam, id aliquet velit urna ut ligula. Vestibulum tempus aliquam aliquam.Aenean vestibulum diam eget condimentum sollicitudin. Etiam metus urna, fringilla a pharetra rhoncus, bibendum in lacus. Ut posuere laoreet odio in tincidunt. Vivamus congue felis vestibulum eros mattis, a ullamcorper ligula molestie. Sed non feugiat mauris, varius consequat velit. Aliquam dignissim tellus turpis, et ornare enim laoreet eget. Curabitur finibus lacus vitae felis blandit tempus. Pellentesque blandit ut velit id pharetra. Etiam at metus urna. Mauris ac ligula laoreet, cursus urna varius, efficitur dui. Cras id urna dolor. In blandit, lacus at fermentum facilisis, nibh orci rhoncus justo, nec sodales magna metus sit amet libero.Etiam in sodales odio. Vestibulum congue venenatis velit, sed tristique sapien tristique id. Cras eu blandit lacus. Phasellus viverra ut risus a ornare. Curabitur luctus dapibus odio vel pretium. Vivamus dolor massa, hendrerit eu neque non, vestibulum consectetur orci. Proin porttitor vitae sem a imperdiet.Donec efficitur ultricies enim, ac consequat quam pulvinar eget. Ut ligula odio, sollicitudin eu viverra ac, varius eu ligula. Fusce lectus tortor, efficitur et consequat vitae, aliquam a ante. Phasellus hendrerit purus faucibus felis eleifend, in lacinia leo euismod. Sed blandit nisl nec vehicula egestas. Etiam mauris justo, malesuada quis varius tincidunt, ullamcorper eget ante. Phasellus dolor ipsum, fringilla in aliquam non, aliquet vitae dolor. Nulla ut velit ipsum. Nulla auctor massa pretium imperdiet finibus. Curabitur vulputate risus quis convallis rhoncus.Curabitur nunc dolor, ultrices a ipsum nec, pretium varius libero. Fusce cursus vehicula tortor, ac consequat mauris ultricies eu. Nunc et justo efficitur, blandit turpis quis, feugiat enim. Phasellus accumsan libero vitae tellus ultricies, eu porta ligula vestibulum. Maecenas a nunc nibh. Suspendisse finibus tempor sem eget vulputate. Nullam cursus magna quam, ac accumsan turpis pulvinar sed. Suspendisse rutrum tristique diam eu elementum.Pellentesque at rutrum mauris. Nulla facilisi. Curabitur quis venenatis mi. Praesent ac magna fermentum, lobortis metus ac, condimentum lacus. Etiam vel sem sit amet velit dictum aliquet. Nunc dapibus metus et pretium vestibulum. Sed enim quam, sollicitudin auctor turpis vitae, mollis pulvinar tellus. Vestibulum pretium tortor at dolor venenatis ultrices. Sed dictum urna sit amet porttitor aliquam. Nullam in efficitur lacus, vitae viverra velit. Etiam mattis eu ligula sed gravida. Phasellus eget tellus mauris. Donec a orci faucibus, fringilla lorem vitae, luctus dui.Aliquam risus risus, porttitor aliquam orci at, ultricies tempor metus. Nunc congue, metus id dignissim dignissim, ex tellus maximus magna, feugiat rhoncus nunc orci vel orci. Etiam nunc justo, pellentesque ac lectus eget, feugiat vehicula nibh. Fusce eget egestas nunc. Aliquam aliquam eget magna vel blandit. Vestibulum sagittis nisl elementum nunc auctor rutrum. Duis facilisis purus sit amet urna blandit, id egestas diam blandit. Phasellus tincidunt laoreet velit, et ornare quam. Suspendisse ultrices, mauris quis mattis aliquam, erat odio suscipit quam, nec rutrum tellus tortor et erat. Maecenas felis erat, eleifend a tempor sed, tempor eget nisi.Mauris vehicula diam a libero pretium, in consectetur quam sollicitudin. Phasellus quis lacinia sapien, ut gravida libero. Etiam sapien eros, sodales vitae cursus ac, vehicula nec tellus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In ac quam placerat, pharetra leo nec, feugiat nunc. Nullam mattis a mi sed rhoncus. Donec orci magna, facilisis tempor turpis gravida, tincidunt bibendum ante. Quisque cursus at lorem vel ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris posuere eu enim ut iaculis.In vel magna sit amet eros varius interdum vel eget ipsum. Suspendisse vulputate eu urna sit amet tincidunt. Quisque sit amet pulvinar justo. Vivamus aliquam sapien pellentesque nisl pharetra posuere. Fusce vitae arcu lectus. Sed viverra, lorem at finibus sodales, lectus ex luctus eros, quis tincidunt arcu est ut mauris. Nunc efficitur, ante sit amet pulvinar pretium, tortor erat facilisis turpis, vitae rutrum enim nisi semper diam. Quisque bibendum sem libero, ut molestie quam suscipit dapibus. Sed condimentum malesuada tincidunt. Sed mattis et mi eu ultrices. Pellentesque finibus sem velit, et tristique turpis ultricies sed. Nam sed mollis erat. Morbi venenatis dui sit amet nisl lacinia tincidunt. Nunc blandit blandit elementum. Suspendisse sit amet interdum nisi.In sed elit a libero dapibus tristique quis ut ipsum. Suspendisse congue massa eget condimentum efficitur. Quisque non faucibus orci. In hac habitasse platea dictumst. Praesent at eleifend magna, quis tincidunt orci. Maecenas a purus porttitor, pretium ipsum pellentesque, dictum urna. Praesent luctus nisl in eros volutpat convallis. Donec vitae lacus quam. Donec tempor, leo ut laoreet placerat, dolor enim lobortis sapien, sed maximus odio tellus vehicula massa. Cras et augue dolor. Cras feugiat mi et mauris mattis, a mollis massa placerat. Nulla condimentum, leo et feugiat porttitor, libero sapien malesuada nibh, eu volutpat erat eros sed purus. Fusce tincidunt cursus tempor. Praesent vitae venenatis tellus, a ornare velit. Proin accumsan accumsan ultrices.
</p>
</md-content>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.3/angular-material.min.js"></script>
</body>
</html>

The problem is depending on $mdSticky itself. The documentation says something which is not true for this moment. $mdSticky is still using the CSS attribute position: sticky, even if its not supported by the browser.
Taken from the $mdSticky documentation:
Whenever the current browser supports stickiness natively, the $mdSticky service will just use the native browser stickiness.
This simple fiddle demo will help you to check it. Here is some interesting issue on the angular material GitHub page.
I recommend to fallback to position: fixed and try to solve your problem by the "old school way" by using a simple window scroll event directive like:
var app = angular.module('myApp', []);
app.directive('fixed', function ($window) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
var topClass = attrs.fixed,
offsetTop = element[0].offsetTop;
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= offsetTop) {
element.addClass(topClass);
} else {
element.removeClass(topClass);
}
});
}
};
});
.fixIt {
position: fixed;
top: 0;
}
.header {
height:25px;
width:100%;
border: 1px solid red;
}
.content {
height:1500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp">
<div class="header" fixed="fixIt">
</div>
<div class="content">
some content
</div>
</div>