ページ内スクロール

  • Updated: 2022.10.10
  • Published: 2021.09.09
  • 797views
  • JavaScript

今回はページ内スクロールのリンクとページトップへのスクロールボタンを作成します。

ページ内スクロール

HTML

<ul class="pagenav">
<li><a href="#tech">Tech Blog</a></li>
<li><a href="#kyoto">Walk in Kyoto</a></li>
</ul>

CSS

.pagenav {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border-bottom: 1px solid #ddd;
}
.pagenav li {
	margin: 0;
	padding: 0;
	border-left: 1px solid #ddd;
	list-style: none;
}
.pagenav li:last-child {
	border-right: 1px solid #ddd;
}
.pagenav li a {
	display: block;
	padding: 10px 20px;
	font-weight: bold;
}

ページトップボタン

HTML

<a href="#pagetop" class="pagetop"></a>

CSS

.pagetop {
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	z-index: 10;
	position: fixed;
	right: 10px;
	bottom: 10px;
	width: 40px;
	height: 40px;
	padding-top: 3px;
	border: 1px solid #ddd;
	border-radius: 50%;
	background-color: #fff;
}
.pagetop:before {
	content: "";
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-top: 3px solid #aaa;
	border-right: 3px solid #aaa;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

JavaScript

$(document).on('click','a[href^="#"]',function () {
      var header = $('#header').outerHeight();
      var href = $(this).attr('href');
      if(href.length > 1){
        if(href === '#pagetop'){
          $('html,body').animate({
            scrollTop : 0
          });
        }else{
          var top = $(href).offset().top;
          $('html,body').animate({
            scrollTop : top - header
          });
        }
        return false;
      }
    });
});

解説

a[href^=”#”]で#で始まるリンクに対してクリックイベントを設定しています。

$(document).on('click','a[href^="#"]',function () {

このサイトはヘッダーが固定ですのでヘッダーの高さを取得しています。

var header = $('#header').outerHeight();

href=”#” #のみのリンク設定では反応しないように

if(href.length > 1){

#pagetopのときとそれ以外で処理を分けています。

if(href === '#pagetop'){
	//...ページトップへのスクロール
}else{
	//...それ以外のスクロール
}

pagetopのときは0(ページトップ)までスクロールするようにしています。

$('html,body').animate({
  scrollTop : 0
});

それ以外はhrefからスクロール位置を取得してそこからヘッダーの高さを引いた値までスクロールするようにしています。

var top = $(href).offset().top;
$('html,body').animate({
  scrollTop : top - header
});

$(‘html,body’)にしているのはどのブラウザでもスクロールされるようにhtml、bodyの両方を指定しています。

$('html,body').animate({

関連記事

人気の投稿

最新の投稿

タグ

月別アーカイブ

Contact

WEB制作の依頼など気軽にお問い合わせください。

お問い合わせ