Skip to content

Instantly share code, notes, and snippets.

@takunagai
Last active August 29, 2015 14:02
Show Gist options
  • Save takunagai/457302aaa44421bbc958 to your computer and use it in GitHub Desktop.
Save takunagai/457302aaa44421bbc958 to your computer and use it in GitHub Desktop.
ページ内スムーススクロール & ページ上部へ戻るボタン(要jQuery)
$(function() {
/**
* ページ内スムーススクロール
* https://gist.github.com/takunagai/457302aaa44421bbc958
* サンプル:http://codepen.io/oreo3/pen/JjHDz
*/
$('a[href^="#"], area[href^="#"], a[href=""], area[href=""]').on('click', function(e) {
var href= $(this).attr('href');
var target = $(href === '#top' || href === '#' || href === '' ? 'html' : href);
var isSafari = /Safari/.test(navigator.userAgent);
$(isSafari ? 'body' : 'html').animate({scrollTop:target.offset().top});
e.preventDefault();
});
/**
* ページ上部へ戻るボタン
* 画面右下固定表示。スクロールで表示/非表示
*/
// Setting
var topBtn = $('#move-page-top');//ページTopに戻るボタン
var windowHeight = (window.innerHeight||document.documentElement.clientHeight||0);//ウインドウの高さ
//ウインドウの高さ以上スクロールさせると表示、以下なら非表示
$(window).scroll(function(){
if ($(window).scrollTop() > windowHeight){
topBtn.fadeIn();
}
else {
topBtn.fadeOut();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment