web-dev-qa-db-ja.com

クリックでのjavascriptスムーズスクロール

私はこのリンクを使用しています：

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

一度に2つのことを行います。

  1. ユーザーをページの先頭に移動します
  2. この他の（無関係な）Ajaxロード機能を実行します

すべてがうまく機能しますが、一番上までスムーズにスクロールする方法を見つけようとしています。 .scrollを追加してjquery scrollToプラグインにアタッチしようとしましたが、何も起こりません。これは、おそらくjavascript onclickを使用しているのに関係しているのに対し、href属性はまったく別のことをしています。

アニメーション化されたスムーズスクロールをonclick = "location.href = '＃top'"にアタッチする方法はありますか？

javascriptscrolltop
15
user1691389

これを試して、scrollTop()関数をアニメーション化します。

リンクのIDを設定：

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

スクロールするjquery：

$('#link').click(function(e){
  var $target = $('html,body');
  $target.animate({scrollTop: $target.height()}, 500);
});
40
PRNDL Development Studios
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>
4
vsync