How can I set an offset on my "sticky" navigation? - javascript

I have a fixed header with on my website at 65px tall. I have a secondary navigation about 3/4 down the page that I want to fix to the bottom of my header once scrolled to it.
I've used Josh Lee's answer on this post to get the functionality to work, however, because my header is fixed, the secondary navigation scrolls right past it and becomes fixed once it hits the top of the page.
Since it completely bypasses my header, how can I set an offset for the trigger so that it happens 65px from the top of the screen?
In my <head>:
<script>
function moveScroller() {
var move = function() {
var st = $(window).scrollTop();
var ot = $("#scroller-anchor").offset().top;
var s = $("#mydiv");
if(st > ot) {
s.css({
position: "fixed",
top: "65px"
});
} else {
if(st <= ot) {
s.css({
position: "relative",
top: ""
});
}
}
};
$(window).scroll(move);
move();
}
</script>
On my page:
<div id="scroller-anchor"></div>
<div id="mydiv" class="">
<ul class="wrap">
<li> ... </li>
<li> ... </li>
<li> ... </li>
<li> ... </li>
</ul>
</div>
<script type="text/javascript">
$(function() {
moveScroller();
});
</script>

I believe you will need to account for the space when you are checking when to change the position to fixed for example change ot variable to
var ot = $("#scroller-anchor").offset().top - 65;

I don't know if this could be considered the "correct" way of solving my problem, but it seemed to have worked for me... I added top:-65px to the scroller-anchor element.
<div id="scroller-anchor" style="top: -65px;"></div>

Related

JavaScript smooth scroll not working in safari browser

I have created small menu order application, I have added 5 menu categories is Desserts, salad, thai noodles and more using horizontal scroll bar. if I click salad or any categories move left and right position working fine in chrome. I checking safari browser not working horizontal scroll. what I am missing. could you please check and let me know.
html:
<div class="menu" id="menu">
<div class="topnav sticky" id="stickyMenu"><span data-id="appetizers" id="nav1" class="cat-nav">Appetizers</span><span data-id="desserts" id="nav2" class="cat-nav">Desserts</span><span data-id="pizza--classic-11-inches-" id="nav3" class="cat-nav active">Pizza (Classic 11 inches)</span><span data-id="salad" id="nav4" class="cat-nav">Salad</span><span data-id="thai-noodles" id="nav5" class="cat-nav">Thai Noodles</span></div>
<!-- <div class="row filter">
<input type="text" id="gsearch" class="form-control gsearch" placeholder="Search within this Menu...">
</div> -->
</div>
js code:
$(document).on('click', ".topnav .cat-nav", function(e) {
$(".topnav .cat-nav").removeClass("active");
$(this).addClass("active");
var target = $(this).data("id");
$('html, body').animate({
scrollTop: ($("#"+target).offset().top - 50)
}, 500);
});
$(window).scroll(function() {
//get current sroll position
var scrollPosition = $(window).scrollTop();
//get the position of the containers
var s=["appetizers","desserts","pizza--classic-11-inches-","salad","thai-noodles"];
for (i=0; i<s.length; i++) {
if (scrollPosition >= ($("#"+s[i]).offset().top) - 190) {
$("#nav"+(i+1)).addClass("active");
$("#nav"+(i+1)).siblings().removeClass("active");
// $('.cat-nav').scrollLeft(myScrollPos);
var element = document.querySelector(".active");
element.scrollIntoView({behavior: "smooth" ,inline: "center"});
// $("#nav"+(i+1)).css({behavior: "smooth" ,inline: "center"});
}
}
});
Add overflow: auto to your sticky or topnav class:
.sticky {
overflow: none;
overflow-x: auto;
display: block;
}
This might work.

Make Header/Navigation change colour when on different section of the website

I am working on a website redesign for my personal portfolio website. I had a cool feature in mind where my header/navigation bar would change colour depending on what section of the webpage it is on (The website is one page only).
The only way i could think of doing this is adding onclick events to the links that go to the different sections of the page, however this would not allow me to change the colour of the header/navigation bar for when the user scrolls manually to a new section.
I was wondering if someone could point me in the right direction as I'm not sure where to start.
Here is the website as it stands now if people want to view it:
www.kylebinger.com
Here is my HTML markup regarding the header
<header>
<div class="container">
<nav>
Welcome
Work
Case Study
About
Contact
</nav>
</div>
</header>
Thanks in advance for any help.
JQuery's offset and scrollTop functions should do the trick. .offset() gets the current coordinates of the element, while .scrollTop() will get the current scrollbar position. Compare them and change CSS when conditions are met. See example:
var top1 = $('#home').offset().top;
var top2 = $('#featuredWork').offset().top;
var top3 = $('#caseStudy').offset().top;
$(document).scroll(function() {
var scrollPos = $(document).scrollTop();
if (scrollPos >= top1 && scrollPos < top2) {
$('#change').css('background-color', '#f00');
} else if (scrollPos >= top2 && scrollPos < top3) {
$('#change').css('background-color', '#0f0');
} else if (scrollPos >= top3) {
$('#change').css('background-color', '#00f');
}
});
body {
margin: 0;
padding-top: 30px
}
header {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: #000;
}
section {
height: 500px;
background-color: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="change">
<div class="container">
<nav>
Welcome
Work
Case Study
</nav>
</div>
</header>
<section id="home">Content</section>
<section id="featuredWork">Content</section>
<section id="caseStudy">Content</section>

How do I stop an inheritly positioned element from jumping up page when I change the div above it to fixed?

Okay so I have a page that uses javascript to fix the header to the top of the page (thus removing the banner) when you scroll past the bottom of the banner (about 200px down page).
On this website I've been using containers that have the position:inherit; property set to contain each part of the page. These then have a relatively positioned element inside them so I can place all my absolutely positioned elements where I like.
My problem is that id="content" keeps jumping to the top of the page when the javascript changes id="header" to position:fixed;
See here: www.obsojb.com
I have tried absolutely positioning id="content" and setting it's top value but it wouldn't work and I'm a bit stuck.
Here is a very simplified version of the HTML:
<body>
<div id="page"> <!--inherit-->
<a id="banner"></a> <!--inherit-->
<div id="header"> <!--inherit-->
<div id="lang"> <!--relative-->
<ul>...</ul> <!--inherit-->
<other divs> <!--absolute-->
</div>
<div id="nav"> <!--relative-->
<ul>..</ul> <!--inherit-->
<a id="userbutton"></a> <!--absolute-->
</div>
</div
<div id="content0"> <!--inherit-->
<div id="content"> <!--relative-->
<PAGE CONTENT> <!--absolute-->
</div>
</div>
<div id="footer"></div>
</div>
</body>
Here is my javascript:
var bannerheight // Glob var
window.onload = function() {
window.bannerheight = $('#bannerimg').height();
checkOffset();
};
window.onscroll = function(oEvent) {
checkOffset();
}
function checkOffset() {
if (window.pageYOffset >= window.bannerheight) {
document.getElementById("header").style.position = "fixed";
document.getElementById("banner").style.display = "none";
document.getElementById("padding").style.height = window.bannerheight+"px";
}
else {
document.getElementById("header").style.position = "inherit";
document.getElementById("banner").style.display = "block";
document.getElementById("padding").style.height = "0px";
}
}
and here is the relevant CSS:
#page {
margin:0px auto;
}
#lang {
position:relative;
}
#nav {
position:relative;
margin:0px auto;
}
#content0 {
height:800px;
}
#content {
position:relative;
margin:0px auto;
}
Try giving the content div a "margin-top" and set it to the number of pixels that the page is "jumping". Then when you scroll up and reset the position, undo the margin-top back to zero.
I've tested this and it solved my jumping issue.
I'm not sure what you expect as output but position: fixed works on the document, globally. It not only ignores element flow (like position: absolute) but it also ignores scrolling.
position: absolute is relative to it's offset parent which can be an item with position: relative.
You typically only want to use position: fixed if something needs to stick to the window, like a little popup that scrolls with as you go down the page. The Facebook header is a good example. Their header bar is fixed to the top of the window and stays there even if you scroll.

How to scroll back to the top of page on button click?

I am creating my product pages by using the object tag code, but every time I click the "view" button, the next page is staying at the same position of previous page which I just viewed. How can I add functionality that will let me view from the top of page every time I click the "view" button?
<div id="container" class="clearfix"><!--! end of #sidebar -->
<div class="holder"></div>
<div id="content" class="defaults"><!-- navigation holder -->
<div id="title2">Office Section</div>
<!-- item container -->
<ul id="itemContainer">
<li>
<div id="product">
<div id="title">FuBang®</div>
<div class="imageOuter" style="margin:0">
<a class="image" href="officesection010.html">
<span class="rollover" ></span>
<img class="imgborder" src="product/officesection/010.jpg" width="165" height="165" />
</a>
</div><br />
<div id="text">Sofa </div><br />
<div id="button">
View Details
</div>
</div>
</li>
</ul>
<br />
<div id="title2"></div>
<div class="holder"></div>
</div>
</div> <!--! end of #content -->
</div> <!--! end of #container -->
When I click the "View Details" button at a specific position "x" here: http://postimg.org/image/vgs0lwhtr/
The next page shows the same position "x", but I want it to jump to the top of page:
http://postimg.org/image/vn80e2lph/
Using Javascript:
document.body.scrollTop = document.documentElement.scrollTop = 0;
Using jQuery:
$(function() {
$('body').scrollTop(0);
});
jQuery(document).ready(function($){
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('#backToTop').fadeIn('slow');
} else {
$('#backToTop').fadeOut('slow');
}
});
$('#backToTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 500);
//$("html, body").scrollTop(0); //For without animation
return false;
});
});
please refere this, may this help
Sometimes placing scroll to body doesn't work if your current content is generated through jQuery (as it was in my case). In such situation you can just do following.
$(function() {
$('html').scrollTop(0);
});
A small issue with Subhash's jQuery solution is that you must call this code within $(document).ready() in order for your $('body') selector to work. The ready event may not fire before parts of your page have been rendered to the screen.
An better approach is to simply modify the user's location as a work-around to this browser 'feature':
//Above all of your $(document).ready(...) code
document.location = "#";
Simple HTML solution for jumping between page parts
// Place a tag like this where you would like to go
// in your case at the top
<a name="top"></a>
// you will reach there by click of this link better use an image reach their by clicking on this we can also use an image, align in right
last
Back to top button, works in all browsers.To change the scroll speed simply change the x in counter -= x here x = 10
function scrollToTop(){
var myBody = document.body;
var id = setInterval(secondFunction,1);
var height = window.pageYOffset;
var counter = height;
function secondFunction(){
if(window.pageYOffset == 0){
clearInterval(id);
}
else {
if(!!navigator.userAgent.match(/Trident/g) || !!navigator.userAgent.match(/MSIE/g)){
counter -= 10;
counter--;
document.documentElement.scrollTop = counter;
}
else {
counter -= 10;
counter--;
myBody.scrollTop = counter;
}
}
}
}
body {
height: 5000px;
margin: 0;
padding: 0;
}
.backToTop {
position: fixed;
/* Fixed at page */
top: auto;
bottom: 20px;
left: auto;
right: 20px;
background-color: crimson;
color: white;
padding: 5px;
cursor: pointer;
}
header {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100px;
background-color: black;
}
<!-- back to top button -->
<span class="backToTop" onclick="scrollToTop()">TOP</span>
<!-- Header -->
<header>
</header>
Assign an id="#body" and tabindex in the <body> tag
<body id="#body" tabindex="1">
and use jquery focus()
$(function() {
$("#body").attr("tabindex",-1).focus();
}
You can use this method:
function gototop() {
if (window.scrollY>0) {
window.scrollTo(0,window.scrollY-20)
setTimeout("gototop()",10)
}
}

Scroll Automatically to the Bottom of the Page

I have a list of questions. When I click on the first question, it should automatically take me to a specific element at the bottom of the page.
How can I do this with jQuery?
jQuery isn't necessary. Most of the top results I got from a Google search gave me this answer:
window.scrollTo(0, document.body.scrollHeight);
Where you have nested elements, the document might not scroll. In this case, you need to target the element that scrolls and use its scroll height instead.
nestedElement.scrollTo(0, nestedElement.scrollHeight);
Some additional sources you can take a look at:
http://www.alecjacobson.com/weblog/?p=753
http://www.mediacollege.com/internet/javascript/page/scroll.html
http://www.electrictoolbox.com/jquery-scroll-bottom/
To scroll entire page to the bottom:
const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
You can view the demo here
To scroll a specific element to the bottom:
const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
Here is the demo
And here's how it works:
Ref: scrollTop, scrollHeight, clientHeight
UPDATE: Latest versions of Chrome (61+) and Firefox does not support scrolling of body, see: https://dev.opera.com/articles/fixing-the-scrolltop-bug/
Vanilla JS implementation:
element.scrollIntoView(false);
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
You can use this to go down the page in an animation format.
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
one liner to smooth scroll to the bottom
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
To scroll up simply set top to 0
Below should be the cross browser solution. It has been tested on Chrome, Firefox, Safari and IE11
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo(0,document.body.scrollHeight); doesn't work on Firefox, at least for Firefox 37.0.2
Sometimes the page extends on scroll to buttom (for example in social networks), to scroll down to the end (ultimate buttom of the page) I use this script:
var scrollInterval = setInterval(function() {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);
And if you are in browser's javascript console, it might be useful to be able to stop the scrolling, so add:
var stopScroll = function() { clearInterval(scrollInterval); };
And then use stopScroll();.
If you need to scroll to particular element, use:
var element = document.querySelector(".element-selector");
element.scrollIntoView();
Or universal script for autoscrolling to specific element (or stop page scrolling interval):
var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
var element = document.querySelector(".element-selector");
if (element) {
// element found
clearInterval(scrollInterval);
element.scrollIntoView();
} else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) {
// no element -> scrolling
notChangedStepsCount = 0;
document.documentElement.scrollTop = document.documentElement.scrollHeight;
} else if (notChangedStepsCount > 20) {
// no more space to scroll
clearInterval(scrollInterval);
} else {
// waiting for possible extension (autoload) of the page
notChangedStepsCount++;
}
}, 50);
CSS-Only?!
An interesting CSS-only alternative:
display: flex;
flex-direction: column-reverse;
/* ...probably usually along with: */
overflow-y: scroll; /* or hidden or auto */
height: 100px; /* or whatever */
It's not bullet-proof but I've found it helpful in several situations.
Documentation: flex, flex-direction, overflow-y
Demo:
var i=0, foo='Lorem Ipsum & foo in bar or blah ! on and'.split(' ');
setInterval(function(){demo.innerHTML+=foo[i++%foo.length]+' '},200)
#demo{ display:flex;
flex-direction:column-reverse;
overflow-y:scroll;
width:150px;
height:150px;
border:3px solid black; }
body{ font-family:arial,sans-serif;
font-size:15px; }
Autoscrolling demo:🐾
<div id='demo'></div>
you can do this too with animation, its very simple
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
hope helps,
thank you
You can use this function wherever you need to call it:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
jquery.com: ScrollTo
So many answers trying to calculate the height of the document. But it wasn't calculating correctly for me. However, both of these worked:
jquery
$('html,body').animate({scrollTop: 9999});
or just js
window.scrollTo(0,9999);
Here is a method that worked for me:
Expected outcome:
No scroll animation
Loads at bottom of page on first load
Loads on bottom of page for all refreshes
Code:
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
Why this may work over other methods:
Browsers such as Chrome have a built-in preset to remember where you were on the page, after refreshing. Just a window.onload doesn't work because your browser will automatically scroll you back to where you were before refreshing, AFTER you call a line such as:
window.scrollTo(0, document.body.scrollHeight);
That's why we need to add:
history.scrollRestoration = "manual";
before the window.onload to disable that built-in feature first.
References:
Documentation for window.onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
Documentation for window.scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
Documentation for history.scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration
A simple way if you want to scroll down to a specific element.
Call this function whenever you want to scroll down.
function scrollDown() {
document.getElementById('scroll').scrollTop = document.getElementById('scroll').scrollHeight
}
ul{
height: 100px;
width: 200px;
overflow-y: scroll;
border: 1px solid #000;
}
<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>
<br />
<button onclick='scrollDown()'>Scroll Down</button>
You can attach any id to reference attribute href of link element:
<a href="#myLink" id="myLink">
Click me
</a>
In the example above when user clicks Click me at the bottom of page, navigation navigates to Click me itself.
You may try Gentle Anchors a nice javascript plugin.
Example:
function SomeFunction() {
// your code
// Pass an id attribute to scroll to. The # is required
Gentle_Anchors.Setup('#destination');
// maybe some more code
}
Compatibility Tested on:
Mac Firefox, Safari, Opera
Windows Firefox, Opera, Safari, Internet Explorer 5.55+
Linux untested but should be fine with Firefox at least
Late to the party, but here's some simple javascript-only code to scroll any element to the bottom:
function scrollToBottom(e) {
e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
For Scroll down in Selenium use below code:
Till the bottom drop down, scroll till the height of the page.
Use the below javascript code that would work fine in both, JavaScript and React.
JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object)
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
Here's my solution:
//**** scroll to bottom if at bottom
function scrollbottom() {
if (typeof(scr1)!='undefined') clearTimeout(scr1)
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
scr1=setTimeout(function(){scrollbottom()},200)
}
scr1=setTimeout(function(){scrollbottom()},200)
I have an Angular app with dynamic content and I tried several of the above answers with not much success. I adapted #Konard's answer and got it working in plain JS for my scenario:
HTML
<div id="app">
<button onClick="scrollToBottom()">Scroll to Bottom</button>
<div class="row">
<div class="col-md-4">
<br>
<h4>Details for Customer 1</h4>
<hr>
<!-- sequence Id -->
<div class="form-group">
<input type="text" class="form-control" placeholder="ID">
</div>
<!-- name -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<!-- description -->
<div class="form-group">
<textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
</div>
<!-- address -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Address">
</div>
<!-- postcode -->
<div class="form-group">
<input type="text" class="form-control" placeholder="Postcode">
</div>
<!-- Image -->
<div class="form-group">
<img style="width: 100%; height: 300px;">
<div class="custom-file mt-3">
<label class="custom-file-label">{{'Choose file...'}}</label>
</div>
</div>
<!-- Delete button -->
<div class="form-group">
<hr>
<div class="row">
<div class="col">
<button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
<button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
</div>
<div class="col">
<button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#app {
background: #fff;
border-radius: 4px;
padding: 20px;
transition: all 0.2s;
}
JS
function scrollToBottom() {
scrollInterval;
stopScroll;
var scrollInterval = setInterval(function () {
document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);
var stopScroll = setInterval(function () {
clearInterval(scrollInterval);
}, 100);
}
Tested on the latest Chrome, FF, Edge, and stock Android browser. Here's a fiddle:
https://jsfiddle.net/cbruen1/18cta9gd/16/
I found a trick to make it happen.
Put an input type text at the bottom of the page and call a jquery focus on it whenever you need to go at the bottom.
Make it readonly and nice css to clear border and background.
If any one searching for Angular
you just need to scroll down add this to your div
#scrollMe [scrollTop]="scrollMe.scrollHeight"
<div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
</div>
This will guaranteed scroll to the bottom
Head Codes
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
$('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>
Body code
▼ Bottom ▼
I've had the same issue. For me at one point in time the div's elements were not loaded entirely and the scrollTop property was initialized with the current value of scrollHeight, which was not the correct end value of scrollHeight.
My project is in Angular 8 and what I did was:
I used viewchild in order to obtain the element in my .ts file.
I've inherited the AfterViewChecked event and placed one line of code in there which states that the viewchild element has to take into the scrollTop value the value of scrollHeight (this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement.scrollHeight;)
The AfterViewChecked event fires a few times and it gets in the end the proper value from scrollHeight.
We can use ref and by getElementById for scrolling specific modal or page .
const scrollToBottomModel = () => {
const scrollingElement = document.getElementById("post-chat");
scrollingElement.scrollTop = scrollingElement.scrollHeight;
};
In the modal body you can call above function
<Modal.Body
className="show-grid"
scrollable={true}
style={{
maxHeight: "calc(100vh - 210px)",
overflowY: "auto",
height: "590px",
}}
ref={input => scrollToBottomModel()}
id="post-chat"
>
will work this
A simple example with jquery
$('html, body').animate({
scrollTop: $(this).height(),
});
I gave up with scrollto but instead tried anchor approach:
scroll to the bottom
Along with this CSS charm:
html,
body {
scroll-behavior: smooth;
}
Have a nice day!
If there is an ID in any kind of tag at or nearby where you want to scroll to, then all it takes is one line of JavaScript making use of the scrollIntoView function. For example, let's say your element in question is a DIV with the ID "mydiv1"
<div id="mydiv1">[your contents]</div>
then you would run the JavaScript command
document.getElementById("mydiv1").scrollIntoView();
No JQuery is necessary at all.
Hope this helps.
window.scrollTo(0,1e10);
always works.
1e10 is a big number. so its always the end of the page.
A picture is worth a thousand words:
The key is:
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
It is using document.documentElement, which is the <html> element. It is just like using window, but it is just my personal preference to do it this way, because if it is not the whole page but a container, it works just like this except you'd change document.body and document.documentElement to document.querySelector("#container-id").
Example:
let cLines = 0;
let timerID = setInterval(function() {
let elSomeContent = document.createElement("div");
if (++cLines > 33) {
clearInterval(timerID);
elSomeContent.innerText = "That's all folks!";
} else {
elSomeContent.innerText = new Date().toLocaleDateString("en", {
dateStyle: "long",
timeStyle: "medium"
});
}
document.body.appendChild(elSomeContent);
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
}, 1000);
body {
font: 27px Arial, sans-serif;
background: #ffc;
color: #333;
}
You can compare the difference if there is no scrollTo():
let cLines = 0;
let timerID = setInterval(function() {
let elSomeContent = document.createElement("div");
if (++cLines > 33) {
clearInterval(timerID);
elSomeContent.innerText = "That's all folks!";
} else {
elSomeContent.innerText = new Date().toLocaleDateString("en", {
dateStyle: "long",
timeStyle: "medium"
});
}
document.body.appendChild(elSomeContent);
}, 1000);
body {
font: 27px Arial, sans-serif;
background: #ffc;
color: #333;
}

Categories

Resources