Automatic scroll To element on a list when open this

Automatic scroll To element on a list when open this - javascript

) ,
I explain my little problem ( sorry for my english):
I have a list of element (div) in left ( constraint in size) with a scrollbar (auto)
(a custom scroll but it's the same problem with the basic scroll).
All of this "element" can be open (with a "+" button) that open a "sub element" IN the list.
Problem , by example if you open the last element you can't see the sub element without scroll to this sub element, i would like add a js for scrolling to this open sub-element"
I explain with image what i would like have: http://www.nanosix.be/test/help.jpg
and i make a simply version on jsfiddle here :
https://jsfiddle.net/9Lrhfqmk/
<body>
<div class="menu">
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
<div class="ele">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia commodi, quia sint vitae, praesentium beatae, facere vel nisi corporis explicabo temporibus. Laboriosam, blanditiis sint accusantium rem, voluptatibus repellendus amet iste.
<div class="button">+</div>
<div class="other">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur soluta officia, numquam esse nostrum, in tempora alias enim corrupti aliquam, a eius asperiores voluptatem beatae iusto architecto cumque quas ipsum.</div>
</div>
</div>
<script>
$(".button").click(function() {
$(this).parent(".ele").children(".other").toggleClass("displayblock");
});
</script>
</body>

Here is the updated fiddle: https://jsfiddle.net/9Lrhfqmk/2/
You have to do something like this:
$( ".button" ).click(function() {
var parent = $(this).parent(".ele");
var other = parent.children(".other");
other.toggleClass("displayblock");
if(other.hasClass("displayblock")){
$(".menu").scrollTop(other.offset().top);
}
else{
$(".menu").scrollTop(parent.offset().top);
}
});

Related

how to divide a long paragraph from API into 3 section using CSS or Javascript

currently, I am trying to get a long paragraph or news into 3 sections from API so it can take a layout like in example picture. but the problem I can't divide the paragraph to make it like a layout unless I got 3 attributes for every section and just read it in angular.
I already read this Divide HTML into pages, split long paragraphs
but it still not solve my problem, can someone help me to solve this problem only using 1 attribute?
this is my example data for news:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.
this is my html code :

<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-4 pl-0 text-center text-large md-no-padding-lr md-margin-30px-bottom">

<p class="text-extra-dark-gray margin-50px-bottom md-margin-20px-bottom alt-font">
<i class="fas fa-quote-left text-light-gray icon-medium margin-15px-bottom"></i>
Apa yang mendefinisikan siapa kita, tidak ada artinya dibandingkan apa yang menyatukan kita.
<i class="fas fa-quote-right text-right text-light-gray icon-medium margin-15px-bottom"></i>
</p>

</div>
<div class="col-12 col-lg-8 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga autem eius, hic tempore neque vel beatae facilis quaerat excepturi, minima odio dolore! Atque non quo illo, odio est vel consequuntur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quis ex aspernatur ab sunt repellat in ratione. Suscipit fugiat, sed laborum debitis, soluta dolores ipsum hic quae, corporis dignissimos unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus impedit repudiandae illum, incidunt tenetur sapiente ad itaque odio, ipsa cupiditate saepe omnis voluptatibus! Ipsum beatae, nihil voluptatem earum illum non. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sunt aliquam corrupti sed voluptates, suscipit quibusdam rerum inventore molestiae, ullam fugiat ducimus, debitis mollitia consequatur. Maiores, cupiditate! Nesciunt, odio modi.</p>
</div>
</div>
</div>
</div>
</section>


<section class="wow fadeIn parallax p-0 height-400px md-height-200px sm-height-100px background-position-x-50 cover-background" data-stellar-background-ratio="0.5" style="background-image: url('../../../assets/img/galeri/mpkmb-6.webp');">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>


<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-5 pl-0 text-large md-no-padding-lr md-margin-30px-bottom">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, ab minima! Aliquid unde architecto, omnis, quisquam, rem exercitationem fuga reiciendis quam voluptatibus aliquam minima aperiam dolore voluptatem sunt alias quis.</p>
</div>
<div class="col-12 col-lg-7 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum placeat officiis laborum. Amet harum placeat, eos, mollitia laudantium odio, quam rerum ut esse provident explicabo asperiores in possimus molestiae officia.</p>
</div>
</div>
</div>
</div>
</section>

so to sum it:
how can I make a sentence which can continue to the next section like the layout or example image do?
As for my code, it already done slicing the layout image but still not divide or make the news continue to the next section since in my code I divide it into 3 section

Sidebar layout where only the content div is scrollable

I would like to have a sidebar layout like the one in the picture:
The height of the sidebar is 100%; The Menu 1, Menu 2.. header and the div container below (the one with numbers) should also stay visible.
The only appearing scroll should be in the content div and only if the content is long enough.
What i have so far: https://codepen.io/anon/pen/oadQQE
HTML:
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside{
height: 100%;
}
.header {
background: yellow;
font-size: 24px;
overflow: hidden;
}
.header ul {
list-style-type: none;
display: flex;
justify-content: space-between;
}
.header ul li{
border: 1px solid red;
}
.fixed{
border: 1px solid blue;
font-size: 24px;
}
.content{
border: 1px solid red;
height: 100%;
overflow: auto;
}
<div class-"aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>
Edit: leaving this for future reference from W3Schools:
Note: The overflow property only works for block elements with a specified height.

You can do this by setting display: flex on the sidebar itself with a flex-direction: column;.
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
.aside {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
background: yellow;
font-size: 24px;
}
.header ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
}
.header ul li {
border: 1px solid red;
}
.fixed {
border: 1px solid blue;
font-size: 24px;
}
.content {
border: 1px solid red;
overflow: auto;
}
<div class="aside">
<header class="header">
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</nav>
</header>
<div class="fixed">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<div class="content">
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
<p> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error nulla animi atque odit est beatae deleniti totam accusantium. Saepe dicta ex dignissimos voluptate consequuntur beatae animi. Nihil, sequi minima. Minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione quibusdam in eveniet eos tempore quia magni quam ipsum illo est, veniam maiores repudiandae culpa ut! Odio a asperiores nam ipsum.</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, maiores? Magnam assumenda, odit maxime optio, ipsa aut beatae iste expedita perspiciatis eius, earum rerum vel labore laudantium nulla delectus blanditiis.</p>
</div>
</div>

Smooth Scrolling for scrollIntoView() function is not working in chrome browser

I have a button. When clicked upon, I make the page scroll to a div. That's working perfectly in mozilla and IE but its not working properly in chrome browser since its mentioned in nativaly supported. Please suggest what was the issue.
window.addEventListener('load', function() {
// scroll into view
document.querySelector('.js-scroll-into-hello').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });
});
});
<div class="actions">
<button class="btn js-scroll-into-hello">Scroll into view</button>
</div>
<article class="scrollable-parent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<h3 class="hello"><em>hello!</em></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui iure obcaecati, repudiandae aspernatur cumque recusandae
adipisci consequuntur maiores, quo in nulla ratione facere distinctio beatae, quae consequatur ab labore dolorum.</p>
</article>
</div>

Automatic scroll a div down and back to top [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I've got a DIV, automaticly filled via PHP with Data. I need a small script that scrolls down inside the filled DIV if the DIV-size goes out of view (or reaches a maximum size) and then back to top, periodicly. I've already tried a lot of Plugins bot no one works like i expect.
The HTML basicly looks like this:
<div id="header"></div>
<div id="wrapper">
<div id="content">
<div id="placeholder">!THIS IS FILLED UP!</div>
</div>
</div>
<style>
body {
background-color: #999999;
margin: 0 0 0 0;
overflow: hidden;
}
#wrapper {
margin: auto;
width: 1900px;
}
#header {
height: 100px;
}
#content {
width: 1900px;
min-height: 150px;
margin-top: 20px;
}
#placeholder {
}
</style>

Are you trying something like this?
$(function () {
$("html, body").animate({
scrollTop: $("body")[0].scrollHeight
}, 1000, function () {
$("html, body").animate({
scrollTop: 0
}, 1000);
});
});
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div class="filler">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem asperiores placeat, ab earum nulla nemo, temporibus officiis facilis pariatur ea veritatis ratione in velit unde vel illo, ipsa voluptatibus tempore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sapiente reiciendis, hic ducimus recusandae, expedita distinctio temporibus numquam modi, quia maxime laboriosam quibusdam explicabo amet aspernatur natus, repudiandae necessitatibus. Inventore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A excepturi, reiciendis labore quis! Ipsa necessitatibus laudantium numquam debitis architecto enim fugiat iusto deserunt, dolorum asperiores pariatur, labore, dolores modi ad!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis aut porro officiis optio? Corporis perspiciatis reprehenderit blanditiis eos. Reprehenderit repellat quaerat nihil nostrum, quidem earum dolore sed repudiandae deleniti!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, vitae aut molestias harum placeat obcaecati, distinctio vel debitis delectus vero quia unde tempore nisi possimus in modi expedita. Adipisci, repellendus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet iste et ex est blanditiis assumenda natus dicta alias facere mollitia. Possimus natus iure, est alias consequatur enim dolorum eos cupiditate.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iste quos, ipsam obcaecati, modi laboriosam dignissimos at incidunt vel unde ad cum. Consequatur, ut, dolorem. Minima officia atque similique aperiam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur natus, dolor suscipit! Eius natus officia, est quos, blanditiis repellat iste in soluta ipsam! Soluta quas aspernatur itaque, in reiciendis tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum placeat possimus neque ipsa eaque blanditiis similique harum. Tempora rerum, eaque, eum nisi suscipit dolorem reiciendis, unde dignissimos porro consectetur beatae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque odio deserunt a, repudiandae alias saepe. Non commodi dolorum maxime laborum. Pariatur possimus earum dolor quis aut tempora et eius ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quos fugiat doloribus doloremque magni voluptas quas voluptatum molestiae amet optio animi fugit vel, iste id esse ratione eum minima tenetur.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel eaque non nobis, a voluptas facilis minus sunt vero tempora facere. Mollitia dignissimos nobis dolore dolorum, aliquam perspiciatis laborum architecto maiores.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae debitis reiciendis, tenetur ex provident? Perspiciatis, deleniti, exercitationem? Ab nihil eligendi, ipsum, possimus blanditiis, fugit enim totam at reiciendis sequi recusandae.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique eius porro fuga, exercitationem dignissimos, illum, soluta nam hic enim, ad non. Voluptatibus reiciendis, quas nihil mollitia quae rem neque officiis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste optio, architecto. Quis harum fugiat provident! Enim asperiores quam neque et recusandae, esse impedit dolores hic minima in. Explicabo, saepe, dolore.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed laudantium quod iure soluta quis nemo officiis neque, reprehenderit voluptas doloribus veniam veritatis omnis sapiente vero, eum, commodi tempore amet ipsa.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur id autem quaerat obcaecati et non, deserunt nisi aspernatur, sit quod suscipit voluptas possimus aperiam, nihil in minima reiciendis maiores ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, laudantium! Repellendus enim suscipit nobis veritatis accusantium minima possimus repellat ab omnis quia in voluptatum quas dolor, similique fugiat dignissimos numquam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, aliquid dolor! Sequi ex quo laborum maiores quidem officiis, officia vel perferendis? Voluptate, ipsum magni. Repudiandae, deleniti officia architecto tempora nihil!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta fugit officia magnam nesciunt, voluptas eius velit veritatis alias ab iure, delectus repudiandae cum ipsum cumque rem eligendi ullam? Neque, quos.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga sit provident illum modi, quod aut distinctio accusamus facilis tenetur, natus vel temporibus officiis sed voluptatibus ratione tempore sint, totam dicta.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam saepe veritatis iure sint similique totam eaque doloremque laboriosam reiciendis eos quae modi atque, quibusdam quos officiis, temporibus sed pariatur repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam delectus, iste molestias vitae. Fugit doloribus accusantium expedita, sunt fuga, rerum impedit et enim accusamus dicta provident corporis. Ex, quis, alias.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, quisquam eos dicta totam at fugiat hic eum itaque minima, est dolorem et voluptatum nesciunt ipsa perspiciatis inventore enim ratione animi!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sequi obcaecati quia deleniti libero veniam, voluptatum itaque totam voluptatem nostrum sapiente, doloribus tenetur ipsa. Animi et quam laudantium. Quae, laborum!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia consectetur quam voluptate possimus saepe sequi deleniti doloribus iusto! A modi, rerum ipsa similique facere quasi repudiandae quia, molestiae soluta veniam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates vitae at eum distinctio id animi, aliquid ipsam perferendis dolor, vero rem provident unde beatae temporibus quidem dolorem necessitatibus itaque facilis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum illum saepe fugiat dolore. Ad quo maiores a nam vitae vel minus facere quis harum quod, eligendi repellendus, cum repellat optio.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis quibusdam consequatur numquam eveniet voluptates quae libero eaque perspiciatis cum dolor maxime, modi veritatis et quia reprehenderit, praesentium illum pariatur! Deleniti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem atque fuga nisi dolores mollitia veritatis porro perferendis officia perspiciatis fugiat eos at incidunt, nam harum, quis, alias dolor minima sunt!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur cum in eveniet aut iure dignissimos ex accusamus perferendis, culpa, velit quisquam, inventore a. Voluptatum, at quibusdam, nesciunt iure voluptates tempora.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum hic incidunt nam, provident odit sed animi aperiam, dicta ex assumenda fugiat corrupti obcaecati iure eligendi maiores voluptas enim, quaerat. Cupiditate?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate modi, sit nihil fugiat, harum molestias dolore ipsum vitae dicta voluptatibus inventore atque voluptatem. Non voluptatem corrupti, blanditiis repellat omnis voluptates!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo modi provident porro quibusdam voluptatibus quis molestiae aspernatur fugit unde quisquam architecto sapiente tenetur reprehenderit repellat esse nesciunt cumque, iure excepturi?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aliquid perspiciatis possimus distinctio, minus eaque fuga, voluptates cumque, molestiae odio sequi. Iste, quia dolorum soluta adipisci voluptatem animi, a odit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et explicabo deleniti alias possimus, at voluptatum porro veniam placeat voluptatem maiores facilis molestias a debitis tempore. Odit nemo, ea labore fugit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi expedita, enim doloribus inventore odio. Fugiat rerum animi eius rem sit, culpa laboriosam nisi voluptas sequi incidunt blanditiis nesciunt quasi ad?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, esse beatae. Non placeat veniam, enim nemo doloremque necessitatibus sed, quaerat unde, facilis temporibus eveniet deserunt alias dicta ea officiis expedita.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur nemo molestiae vero pariatur harum, quisquam expedita modi! Placeat corrupti, dolorem, tempore mollitia facere, tempora veniam expedita dolores sed consectetur voluptas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis optio dolorum minima dolor, sunt, suscipit id dicta, labore repudiandae nobis itaque inventore possimus architecto, qui sed vel temporibus quibusdam placeat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In explicabo, nobis natus necessitatibus autem voluptatibus sint voluptas, iste ducimus porro alias dicta quod aperiam vitae! Laborum maiores accusantium ipsam voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officiis cum aspernatur aliquid sint, impedit rem et quas? Expedita voluptatibus laudantium recusandae facilis quaerat possimus quas tenetur repellat eum non!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi possimus maxime ab maiores illo, sed porro itaque odio facere aspernatur corporis saepe, et cum dicta a. Omnis pariatur perferendis reprehenderit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste saepe rem repellat esse aperiam doloribus ad, aspernatur! Iste dolor consectetur, voluptates quas tenetur esse officiis eum, possimus debitis blanditiis maiores?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora iste, consectetur ab architecto ipsam deleniti consequuntur in, laudantium eaque quaerat, aut suscipit numquam perferendis nesciunt sit aperiam odit obcaecati saepe!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id corporis facilis, recusandae doloremque! Voluptas dolor eos, labore quaerat atque sit officia voluptates magni dolorem enim ab, vero obcaecati libero, quidem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores expedita ducimus explicabo libero tempora dolore recusandae. Maxime facere aliquid laudantium, consequuntur, animi voluptatem ipsam qui sunt illo, repellat architecto sapiente.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illo, ex placeat asperiores est natus. Maiores quas, eligendi ipsa repellat hic sed illo explicabo, voluptatum harum sit omnis veniam mollitia.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ea ipsum similique sed non, temporibus, nulla ipsam omnis ratione! Ullam culpa itaque, voluptatum quibusdam doloribus commodi quidem molestias nemo enim!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus consequatur commodi vel accusantium, iure ipsum. Eligendi eos, animi, nam, iste voluptatum adipisci excepturi beatae culpa itaque eveniet vitae libero ducimus.</p>
</div>

With plain Vanilla JS you could try something like this
var example = document.getElementsByClassName("example")[0],
content = example.getElementsByClassName("content")[0];
function scrollDown(scrollSpeed, endPause, restartPause) {
setTimeout(function () {
if (example.scrollTop === content.offsetHeight - example.offsetHeight) {
setTimeout(function () {
example.scrollTop = 0;
setTimeout(function () {
scrollDown(scrollSpeed, endPause, restartPause);
}, restartPause || 0);
}, endPause || 0);
} else {
example.scrollTop += 1;
scrollDown(scrollSpeed, endPause, restartPause);
}
}, scrollSpeed);
};
setTimeout(function () {
scrollDown(10, 1000, 1000);
}, 1000); // Initial delay
.example {
height: 100px;
background-color: #f00;
overflow-y: scroll;
}
.content {
padding: 0.1px;
}
<div class="example">
<div class="content">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
Here a codepen example
In addition, in order to allow user to scroll easily, you could create a condition into the scrollDown that check if the class .is-hovered is on the .content item and not change the scrollTop value in this case.
After, just add .is-hovered class when mouseenter event is triggered and remove .is-hovered when mouseleave is triggered from .content

Getting the distance from an element and top of the document

I'm trying to get the distance from the top of an element and the top of the page every time the user scrolls. I got it to work but when you scroll, it says the distance hasn't changed. I tried to solve this with a closure but I am not really great with closures. Theres a demo of what I have so far here: http://addisonbean.com/test/ it logs the distance in the console.
I know there may be an easier way to do this, but I'm would really like to know what I'm doing wrong. Can anyone help me with this?
And this is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FitGird</title>
<link rel="stylesheet" href="fitgrid.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="fg12">Addison Bean.</h1>
<div class="row">
<h2>Article</h2>
<hr class="fg6">
<hr class="fg6 hidden">
<p class="fg6">1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">3. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
<p class="fg6">4. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
<div class="row">
<p class="fg6">5. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. </p>
<p class="fg6">6. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, facilis, quo ab architecto veniam ducimus error porro molestiae numquam harum suscipit quae doloremque ullam libero consequuntur mollitia sit doloribus blanditiis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, ut, saepe quia nam nesciunt delectus sequi incidunt quam amet eaque nostrum blanditiis laboriosam magni minima eveniet culpa dolore sit fugit. </p>
</div>
</div>
<script>
var elem = document.getElementsByTagName('h2')[0];
function makeScrollOffset(el) {
function getWindowOffset() {
var woff = el.getBoundingClientRect().top,
soff = window.pageYOffset;
var dist = Math.round(woff + soff);
console.log(dist);
}
return getWindowOffset;
}
window.onscroll = makeScrollOffset(elem);
</script>
</body>
</html>

With your code it should be:
var dist = Math.round(woff-soff);
Example here

this works very well and returns the distance:
window.onscroll = function ()
{
console.log(document.getElementsByTagName('h2')[0].getBoundingClientRect().top);
}
note that negative number means the selected elements is above the viewport's top line and positive numbers means under this line. if you get the number 0, the element's top is perfectly aligned with the viewport's top line.

We Keep Coding

JavaScript is the programming language of the Web.