素人がプログラミングを勉強していたブログ

プログラミング、セキュリティ、英語、Webなどのブログ since 2008

連絡先: twitter: @javascripter にどうぞ。

ページ内リンクの移動をスムーズにするGreasemonkeyスクリプト

// ==UserScript==
// @name           SmoothMove
// @namespace      http://d.hatena.ne.jp/javascripter/
// @include        http*
// ==/UserScript==

function setClickHandler(doc){
  Array.forEach(doc.getElementsByTagName('a'),
    function(link){
    if(link.hash)link.addEventListener('click',smoothScroll,false);
    });
}

function smoothScroll(e){
  var hashName=this.hash.slice(1);
  var elem=document.getElementById(hashName)||document.getElementsByName(hashName)[0];
  if(!elem)return;
  var pos=elem.getBoundingClientRect();

  var x=pos.left/15;
  var y=pos.top/15;
  (function scroll(i){
     window.scrollBy(x,y);
     if(++i<10)
       setTimeout(scroll,20,i);
     else
       window.scrollBy(pos.left%10,pos.top%10);
   })(0);
  e.preventDefault();
}

setClickHandler(document.body);

window.AutoPagerize&&window.AutoPagerize.addFilter(
  function(docs){
    docs.forEach(setClickHandler);
  })


書いた後に同じようなスクリプトを見つけたのでリンクを貼っておく。Smooth Scroll for Greasemonkey。ソースも似たような感じ。