Scrolling to a element inside a scrollable DIV with pure Javascript

by

You need to read the offsetTop property of the div you need to scroll to and then set that offset to the scrollTop property of the container div. Bind this function the event you want to : 

function scrollToElementD(){
    var topPos = document.getElementById('inner-element').offsetTop;
    document.getElementById('container').scrollTop = topPos-10;
}
div {
    height: 200px;
    width: 100px;
    border: 1px solid black;
    overflow: auto;
}

p {
    height: 80px;
    background: blue;
}
#inner-element {
    background: red;
}
<div id="container"><p>A</p><p>B</p><p>C</p><p id="inner-element">D</p><p>E</p><p>F</p></div>
<button onclick="scrollToElementD()">SCROLL TO D</button>
function scrollToElementD(){
  var topPos = document.getElementById('inner-element').offsetTop;
  document.getElementById('container').scrollTop = topPos-10;
}

Fiddle : http://jsfiddle.net/p3kar5bb/322/ (courtesy @rofrischmann)

More Related Contents:

  1. Can you help me make my code a little simpler and shorter please? thanks [closed]
  2. How to subtract days from a plain Date?
  3. What is the meaning of the ‘g’ flag in regular expressions?
  4. Rendering raw html with reactjs
  5. Format date to MM/dd/yyyy in JavaScript [duplicate]
  6. adding ‘click’ event listeners in loop [duplicate]
  7. Why does isNaN(” “) (string with spaces) equal false?
  8. Validating user’s UTF-8 name in Javascript
  9. javascript: do primitive strings have methods?
  10. jQuery drop down menu closing by clicking outside
  11. Upload files to Firebase Storage using Node.js
  12. How to convert time in milliseconds to hours, min, sec format in JavaScript?
  13. JSON.parse unexpected character error
  14. Are there are any side effects of using this method to convert a string to an integer
  15. Creating a new Location object in javascript
  16. Split a string by whitespace, keeping quoted segments, allowing escaped quotes
  17. setAttribute and video.src for changing video tag source not working in IE9
  18. How do you create a method for a custom object in JavaScript?
  19. How to make side panel in chrome extension?
  20. Center flex item in container, when surrounded by other flex items
  21. Google Maps API v3 adding an InfoWindow to each marker
  22. How to achieve a debounce service on input keyup event in angular2 with rxjs
  23. jQuery: How to listen for DOM changes?
  24. Javascript for..in vs for loop performance
  25. How to change colours for Angular-Chart.js
  26. How can I remove wrapper (parent element) without removing the child?
  27. In what JS engines, specifically, are toLowerCase & toUpperCase locale-sensitive?
  28. Force iOS numeric keyboard with custom / currency pattern
  29. CORS error with jquery
  30. Detecting support for a given JavaScript event?

Leave a Comment