javascript - Java Script scroll top with transition duration - Stack Overflow

admin管理员组

文章数量:1435859

this is my function. i cant find how to add transition duration in it. it just takes me straight upto top. syntax is what i'm looking for. idk much about js.

function topFunction() {
  document.body.scrollTop=0 ;
  document.documentElement.scrollTop =0 ;
} 

this is my function. i cant find how to add transition duration in it. it just takes me straight upto top. syntax is what i'm looking for. idk much about js.

function topFunction() {
  document.body.scrollTop=0 ;
  document.documentElement.scrollTop =0 ;
} 

• javascript

Share Improve this question Follow edited Aug 11, 2017 at 6:42 Jaromanda X 1 asked Aug 11, 2017 at 6:41 Kamran HashmiKamran Hashmi 6111 silver badge77 bronze badges 7

• you'll need to learn CSS (transitions), or some library like jQuery to do what you want with a transition – Jaromanda X Commented Aug 11, 2017 at 6:44
• 6 Possible duplicate of Cross browser JavaScript (not jQuery…) scroll to top animation – Mihai Pantea Commented Aug 11, 2017 at 6:44
• i know css good @JaromandaX. what i dont know is how to embed it in js. in my function. because it's what scrolling it to the top of my page. – Kamran Hashmi Commented Aug 11, 2017 at 6:46
• Possible duplicate of Cross browser JavaScript (not jQuery...) scroll to top animation – Odin Thunder Commented Aug 11, 2017 at 6:46
• actually, I don't think CSS transitions apply, sorry – Jaromanda X Commented Aug 11, 2017 at 6:47

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 3

Try using this in place of your function:

window.scrollTo({
    top: 100,
    left: 100,
    behavior: 'smooth'
});

Reference

You can add transition duration by using below code.

function topFunction() {
  currentYOffset = self.pageYOffset;
  initYOffset = currentYOffset;

  var intervalId = setInterval(function(){
  currentYOffset -= initYOffset*0.05; 
  document.body.scrollTop = currentYOffset ;
  document.documentElement.scrollTop = currentYOffset;

    if(self.pageYOffset == 0){
      clearInterval(intervalId);
    }
  }, 20);

} 

You can set smoothness of the transition by editing the value of interval. I have set it as 20.

Here is a jQuery solution, using the jQuery.animate function.

The function gives you the ability to change the animation time, as well as the selector on which the animation is being applied, so that you can scroll other elements, too.

/**
 * Scroll to a given point on the page with animation
 *
 * @param {int} scrollValue - The top position to scroll to
 * @param {int} [animationTime] - Speed of the animation (in milliseconds)
 * @param {string} [selector] - Which element to scroll. By default, it is the html/body
 */
function animateScrollTo(scrollValue, animationTime, selector){
    if(typeof animationTime === "undefined"){
        animationTime = 520;
    }


    if(typeof selector === "undefined"){
        selector = "html, body";
    }

    jQuery(selector).animate({scrollTop: scrollValue}, animationTime);
}

body {
  scroll-behavior: smooth;
}

Just use this property and document.getElementById('some-id').scrollTop = 0 will work with smooth transition/animation.

本文标签： javascriptJava Script scroll top with transition durationStack Overflow