WEB制作のメモ帳

衆トップページ -> WEB制作のメモ帳 -> jquery -> jQuery「jquery.scrollTo-min.js」でページ内スクロールをスムーズにする

jQuery「jquery.scrollTo-min.js」でページ内スクロールをスムーズにする

2011-07-03

jquery

jQuery「jquery.scrollTo-min.js」でページ内スクロールをスムーズにする

ページ内リンクを押した際のアクションをスムーズなスクロールに実装できるスクリプトを見つけたのでメモ。
適度なスピード感がありストレスなく表現の幅が広げられそうです。

■使用するスクリプト
jquery-1.4.2.min.js
jquery.scrollTo-min.js
http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery

無料ホームページ素材

SOURCE
■HTML

<a href="#comments1" class="scrolltoanchor">コメント1</a>
<a href="#comments2" class="scrolltoanchor">コメント2</a>
<a href="#comments2" class="scrolltoanchor">コメント3</a>

<div id="comments1">本文</div>
<div id="comments2">本文</div>
<div id="comments3">本文</div>

■JAVASCRIPT
<script type="text/javascript">
$(function() {

function scroll(direction) {

var scroll, i,
positions = [],
here = $(window).scrollTop(),
collection = $('.post');

collection.each(function() {
positions.push(parseInt($(this).offset()['top'],10));
});

for(i = 0; i < positions.length; i++) {
if (direction == 'next' && positions[i] > here) { scroll = collection.get(i); break; }
if (direction == 'prev' && i > 0 && positions[i] >= here) { scroll = collection.get(i-1); break; }
}

if (scroll) {
$.scrollTo(scroll, {
duration: 750
});
}

return false;
}

$("#next,#prev").click(function() {
return scroll($(this).attr('id'));
});

$(".scrolltoanchor").click(function() {
$.scrollTo($($(this).attr("href")), {
duration: 750
});
return false;
});

});
</script>
参考サイト
ScrollTo Posts With jQuery
http://webdesignerwall.com/tutorials/scrollto-posts-with-jquery

WEB制作の定番書