1

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 ;
}
Jaromanda X
  • 53,868
  • 5
  • 73
  • 87
Kamran Hashmi
  • 61
  • 1
  • 7
  • you'll need to learn CSS (transitions), or some library like jQuery to do what you want with a transition – Jaromanda X Aug 11 '17 at 06:44
  • 6
    Possible duplicate of [Cross browser JavaScript (not jQuery…) scroll to top animation](https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation) – Mihai Pantea Aug 11 '17 at 06: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 Aug 11 '17 at 06:46
  • Possible duplicate of [Cross browser JavaScript (not jQuery...) scroll to top animation](https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation) – Odin Thunder Aug 11 '17 at 06:46
  • actually, I don't think CSS transitions apply, sorry – Jaromanda X Aug 11 '17 at 06:47
  • document.getElementById("myDIV").style.transitionDuration = "1s"; .animate would be a possible solution but how do i write it? it doesnt work – Kamran Hashmi Aug 11 '17 at 06:51
  • @KamranHashmi check this [add transition duration](https://stackoverflow.com/questions/9607147/how-do-i-get-the-webkit-transition-duration-property-with-jquery) but you need to use jquery – Naren Murali Aug 11 '17 at 06:59

4 Answers4

2

Try using this in place of your function:

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

Reference

techcase
  • 178
  • 9
1

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.

Nirav Majevadiya
  • 84
  • 2
  • 6
0

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);
}
thexpand
  • 641
  • 13
  • 28
0
body {
  scroll-behavior: smooth;
}

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

Ali Sajid
  • 257
  • 2
  • 12