クリックで指定した場所に瞬間移動！
クリックで指定した場所に瞬間移動！:
ある要素をクリックすると、それに対応した場所に一瞬で移動（スクロール）するやり方です。
いろんなサイトを参考にしました。
このコードで重要になってくるポイントは２つ。
① のように、リンク先を#で開始すること。
②移動先の要素のidを①で指定した#〜の〜にすること。
ある要素をクリックすると、それに対応した場所に一瞬で移動（スクロール）するやり方です。
いろんなサイトを参考にしました。
このコードで重要になってくるポイントは２つ。
① のように、リンク先を#で開始すること。
②移動先の要素の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>
コメント
コメントを投稿