javascript smooth scroll on click

Question

I'm using this link:

<a class="" onclick="location.href='#top'" href="superContent">superContent</a>

It does two things at once:

Jumps user to top of the page
Performs this other (unrelated) ajax load function

Everything works great, except I'm trying to figure out how to get it to scroll to the top more smoothly. I've tried adding .scroll to attach it to my jquery scrollTo plugin, but nothing happens, which probably has something to do with the fact that I'm using javascript onclick, while the href attribute does something else entirely.

Is there a way to attach animated smooth-scrolling to onclick="location.href='#top'" ?

score 40 · Accepted Answer · edited Apr 18 '18 at 08:12

40

Try this, it animates the scrollTop() function.

Set link's id:

<a id="link">link</a>

jquery to scroll:

$('#link').click(function(e){
  var $target = $('html,body');
  $target.animate({scrollTop: $target.height()}, 500);
});

edited Apr 18 '18 at 08:12

Community

1
1

answered Oct 22 '12 at 17:16

PRNDL Development Studios

3,270
2
35
50

2

'return false' is definitely wrong here! Use 'function(e)..' and 'e.preventDefault()' instead. – Stephan Weinhold Mar 11 '16 at 10:32
It is beautiful and super clean code. The most important is, it works well! – Jornes Nov 22 '16 at 18:11
6

As this question was asked without a jQuery tag, I'm expecting a plain JS solution. – dude Aug 03 '17 at 08:09

vsync · Answer 2 · 2018-08-08T14:00:39.883

document.querySelector('button').addEventListener('click', function(){
   scrollTo( document.querySelector('aside'), Math.floor(Math.random() * 1000) + 1  , 600 );   
});
    
function scrollTo(element, to, duration) {
    var start = element.scrollTop,
        change = to - start,
        currentTime = 0,
        increment = 20;
        
    var animateScroll = function(){        
        currentTime += increment;
        var val = Math.easeInOutQuad(currentTime, start, change, duration);
        element.scrollTop = val;
        if(currentTime < duration) {
            setTimeout(animateScroll, increment);
        }
    };
    animateScroll();
}

//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
  t /= d/2;
  if (t < 1) return c/2*t*t + b;
  t--;
  return -c/2 * (t*(t-2) - 1) + b;
};

button{ float:left; }
aside{ height:200px; width:50%; border:2px dashed red; overflow:auto; }
aside::before{
  content:''; 
  display:block; 
  height:1000px;  
  background: linear-gradient(#3f87a6, #ebf8e1, #f69d3c);
}

<button>click to random scroll</button>
<aside></aside>

javascript smooth scroll on click

2 Answers2

Linked

Related