Search code examples
javascripthtmlmaterialize

Materialize modal back to top button

I have a modal from Materialize, I want to make the modal back to top when user close the modal.

Modal Image:

Modal Image

I try to get the scroll value like:

console.log("Scroll Top: " + modalContent.scrollTop);
console.log("Offset: " + modalContent.offsetTop);

The console:

Scroll Top: 229
Offset: 0

I thought That I can override the scrollTop value, but when I do like:

document.querySelector(".modal-content").scrollTop = 0;

Nothing happen to the modal (the modal not scrolling to the top).

When I try to log the current position with:

console.log(document.querySelector(".modal-content").scrollTop)

It always returns zero whenever I scrolled trought the modal. I want that when user click close the modal is scrolled back to the top. Did I miss something?

Modal:

<div id="team-modal" class="modal modal-fixed-footer margin-top-50">
  <div class="modal-content">
    <div class="card-panel teal modal-scroll">
      <h4 class="white-text light center modal-mark">Team Detail</h4>
      <hr>
      <div class="center">
        <img class="modal-flag-image" src="./assets/images/not-found.svg" alt="Country Flag">
      </div> <!-- center -->
      <div class="center">
        <!-- Some long content here -->
      </div> <!-- center -->
    </div> <!-- card-panel teal-->
  </div> <!-- modal-content -->
  <div class="modal-footer">
    <a class="waves-effect waves-light btn indigo accent-4">Save Team</a>
    <a class="waves-effect waves-light btn red close-modal-btn">Close</a>
  </div> <!-- modal-footer -->
  </div> <!-- modal modal-fixed-footer -->

Close button event listener:

let modalClose = document.querySelector(".close-modal-btn");
modalClose.addEventListener("click", function(e) {
  e.preventDefault();
  document.querySelector(".modal-content").scrollTop = 0;
});
Solution

  • Had the same problem, worked for me with:

    let element = document.getElementById('scrollTo');

element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });