Question 278120 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Scroll to bottom of div with smooth scroll

I have a container and I have a function using scrollTop that will scroll to the bottom of the container when it is called.

function updateScroll(){
    var objDiv = document.getElementById("con-result");
    objDiv.scrollTop = objDiv.scrollHeight;
};

How do I add smooth scrolling functionality to this? I know that there is behavior: smooth available but I don’t know how to add this to what i’m trying to do as it is available using window.scrollTo().

Any help would be great!

Tags:

4

Answers


  1. 0

    Can you try this

    #con-result {
   scroll-behavior: smooth;
}

function updateScroll(){
   var objDiv = document.getElementById("con-result");
   // No change needed here, the CSS will take care of the smooth behavior
   objDiv.scrollTop = objDiv.scrollHeight;
};

    Set the scroll behavior before calling updateScroll

    document.getElementById("con-result").style.scrollBehavior = "smooth";

    Call this function whenever you want to scroll

    updateScroll();
    Login or Signup to reply.
  2. 0

    To scroll to the bottom of the element you can use scrollTo() along with the behaviour: smooth property:

    function scrollToBottom(el) {
  el.scrollTo({
    top: el.scrollHeight,
    behavior: 'smooth'
  })
};

const targetElement = document.querySelector('#con-result');
document.querySelector('button').addEventListener('click', () => scrollToBottom(targetElement));
    #con-result {
  height: 100px;
  overflow: scroll;
}

#con-result>div {
  margin-top: 1000px;
}
    <button>Scroll down</button>
<div id="con-result">
  <div>Lorem ipsum</div>
</div>
    Login or Signup to reply.
  3. 0

    To add smooth scrolling functionality to the scrollTop assignment in JavaScript, you can’t directly use the behavior: smooth option since that’s part of the scrollTo options object available in the newer Scroll API, which doesn’t apply to the scrollTop property.

    However, you can achieve a smooth scrolling effect by using Element.scrollIntoView() with behavior: ‘smooth’, or by using the newer scrollTo with the appropriate options if you’re targeting modern browsers.

    Here’s how you could do it using scrollIntoView():

    function updateScroll(){
    var objDiv = document.getElementById("con-result");
    var scrollHeight = objDiv.scrollHeight;
    var scrollToEnd = document.createElement("div");
    
    scrollToEnd.style.position = 'absolute';
    scrollToEnd.style.top = scrollHeight + 'px';
    objDiv.appendChild(scrollToEnd);

    scrollToEnd.scrollIntoView({ behavior: 'smooth' });
    
    // Optional: Remove the div after the scroll, if you want to keep the DOM clean
    scrollToEnd.remove();
};

    And here is how you could do it using the scrollTo with the top property set to scrollHeight:

    function updateScroll(){
    var objDiv = document.getElementById("con-result");
    objDiv.scrollTo({
        top: objDiv.scrollHeight,
        behavior: 'smooth    });
};

    Both of these methods will add a smooth scrolling animation to your container. Keep in mind that scrollIntoView and the options object for scrollTo may not be supported in all browsers, especially older ones. Always check for compatibility if you expect your website to be used on older browsers or consider polyfills for broader support.

    Also, if you’re dynamically adding content to the container and want to scroll to the bottom as new content is added, make sure to call updateScroll after the new content has been appended to ensure accurate scrolling.

    Login or Signup to reply.
  4. 0

    Without using directly CSS you can use element.scroll() by setting its top property to element.scrollHeight. like this:

       objDiv.scroll({ top: objDiv.scrollHeight, behavior: 'smooth' });

    Or you can also use element.scrollIntoView(), and setting its parameter to false, which aligns the element at the bottom of the viewport:

       let aDiv = document.getElementById("con-resul");
   aDiv .scrollIntoView(false);

    Lastly you can use JQuery, with animate():

       let objDiv = $("#con-result");
   objDiv.stop().animate({ scrollTop: objDiv.prop("scrollHeight") }, 500);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search