クリックで指定した場所に瞬間移動！

クリックで指定した場所に瞬間移動！:

ある要素をクリックすると、それに対応した場所に一瞬で移動（スクロール）するやり方です。

いろんなサイトを参考にしました。

このコードで重要になってくるポイントは２つ。

① のように、リンク先を#で開始すること。

②移動先の要素のidを①で指定した#〜の〜にすること。

例： 
<a href="#to-top">TOP</a>  
<p id="top"> 

完成形

<!DOCTYPE html> 
<html> 
<head> 
    <title>My first Chartist Tests</title> 
    <link rel="stylesheet" 
    href="bower_components/chartist/dist/chartist.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
</head> 
 
<body> 
 
    <a href="#top">TOP</a> 
 
    <div style="margin: 3000px 0;"></div> 
 
    <p id="top"> 
        Hello world 
    </p> 
 
    <script> 
        $(function(){ 
            $('a[href^="#"]').click(function(){ 
                var speed = 500; 
                var href= $(this).attr("href"); 
                var target = $(href == "#" || href == "" ? 'html' : href); 
                var position = target.offset().top; 
                $("html, body").animate({scrollTop:position}, speed, "swing"); 
                return false; 
            }); 
            $('a[href^="#"]').click(function(){ 
                $('.hidenbox').hide(); 
            }); 
        }); 
    </script> 
</body> 
</html>