How to scroll to particular element using CSS/JS

Question

This is the dummy code. My requirement is when I click on last li element then one hidden div inside it will be displayed.But I need to scroll down to it to see it. So when I click on li with id=hello then window should automatically scroll down to that div?

First preference using CSS then JS and no jQuery.

var ele=document.getElementById('hello');


ele.addEventListener("click", function (event) {
    document.getElementById("hidden-div").style.display="block";
},false);

.fixed-height-div{
 height:120px;
 overflow-y:scroll;
}

.fixed-height-div > li{
    background-color:lightblue;
    list-style-type: none;
}

<div class="fixed-height-div">
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
  <li id="hello">H
      <div id="hidden-div" style="display:none;">
          This should be displayed after click<br><br>
          And the scroll should come to this screen.
       </div>
    </li>

Well, then the first thing I would try is putting a simple anchor element inside your hello li and setting it's href attribute to #myHiddenDivsId. It requires no JS. — Michal Leszczyk
– Michal Leszczyk, Commented Nov 6, 2014 at 7:16
I don't think you can scroll with CSS, as there is no css property that handles the DOM elements scroll. I at least never came across of it. — Michal Leszczyk
– Michal Leszczyk, Commented Nov 6, 2014 at 7:22
Yeah, but what kind of animation? You could animate the div to some other position, but you can't scroll the page using CSS. Or did I not understand your last question? — Michal Leszczyk
– Michal Leszczyk, Commented Nov 6, 2014 at 7:27

shinobi · Accepted Answer · 2023-04-09 23:04:44Z

10

Just after you show/expand your hidden div, call the scrollIntoView function of the li element.

This requires no jQuery.

function showIt(elementId) {
    var el = document.getElementById(elementId);
    el.scrollIntoView(true);
}

For more refer https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

edited Apr 9, 2023 at 23:04

answered Nov 6, 2014 at 7:05

shinobi

2,5371 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shoaib Chikate Over a year ago

Can u provide solution using CSS? +1 for this JS solution

shinobi Over a year ago

@ShoaibChikate I doubt you can scroll a div using css. Although you can give effects using css while the div scrolls. But you cannot actually set a scroll value using css.

theFreedomBanana Feb 12 at 8:43

If you want a smooth transition from the li element to the div you can use the behavior option: el.scrollIntoView({ behavior: "smooth" });

bemol · Accepted Answer · 2014-11-06 07:09:36Z

1

You can use anchor redirecting window.location = currentlocation + "#" + id, or you can use jquery lib - scrollTo

edit: I read it cannnot be jQuery. Try this:

ele.addEventListener("click", function (event) {
    document.getElementById("hidden-div").style.display="block";
    window.location.href = window.location.href + "#hidden-div";
},false);

edited Nov 6, 2014 at 7:09

answered Nov 6, 2014 at 7:03

bemol

3954 silver badges20 bronze badges

2 Comments

Shoaib Chikate Over a year ago

Can u provide solution using CSS? +1 for this JS solution.

bemol Over a year ago

Unfortunately there is no solution using CSS.

Jan · Accepted Answer · 2014-11-06 07:10:43Z

0

var ele=document.getElementById('hello');
ele.addEventListener("click", function (event) {
    document.getElementById("hidden-div").style.display="block";
    var top = this.offsetTop;
    this.parentNode.scrollTop += top; //Container div scroll
    document.body.scrollTop += top; //Body scroll
},false);

answered Nov 6, 2014 at 7:10

Jan

1091 gold badge2 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to scroll to particular element using CSS/JS

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related