IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

ホーム / CSS / ページトップへ戻るスムーズスクロール(jQueryなし)

ページトップへ戻るスムーズスクロール(jQueryなし)

2017/12/28 CSS, javascript, WebTips, はてなブログ

ページトップへ戻るスムーズスクロール(jQueryなし)

  • HTML
  • Javascript
  • CSS
  • はてなブログ用
  • お問い合わせ等

当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では必須になってきています。これまで公開しているスクリプトにも含まれていますが、リクエストもありましたので単独で切り出してみました。「 」は、ホームページへのリンクだけです。

HTML

<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;">アイコンまたはイメージなど</a></li>
<li><a href="あなたのブログURL">アイコンまたはイメージなど</a></li>
</ul>

Javascript

※使用、改変は自由ですが、転載はしないでください。

function smoothScroll(targetY) {
var startY = window.pageYOffset;
var f = ( targetY > startY ) ? true : false; // 'down' = true : 'up' = false
setTimeout(function(){
if( f && (startY <= targetY)){
startY = startY + (targetY - startY) / 20 + 1;
window.scrollTo(0, startY);
setTimeout(arguments.callee, 10);
} else if ( !f && startY >= targetY){
startY = startY - (startY - targetY) / 20 - 1;
window.scrollTo(0, startY);
setTimeout(arguments.callee, 10);
}else{
window.scrollTo(0, targetY);
}
}, 10);
}

CSS

/* To Top */
.toTop-nav {
position: fixed;
bottom: 10px;
right: 10px;
display: -webkit-flex;
display: flex;
padding: 0;
margin: 0;
z-index: 999; }
.toTop-nav li {
list-style-type: none;
background: rgba(0, 0, 0, 0.3);
border-radius: 50px;
text-align: center; }
.toTop-nav li:first-child {
margin-right: 10px; }
.toTop-nav li a {
display: block;
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px; }
.toTop-nav li a {
color: #fff;
text-decoration: none; }
.toTop-nav li a:visited {
color: #fff; }
.toTop-nav li a:hover {
color: #fff;
text-decoration: underline; }
.toTop-nav li a:active, .toTop-nav li a:focus {
color: #fff; }
.toTop-nav li a:hover {
text-decoration: none; }

はてなブログ用

  1. 下のコードのうち、「あなたのブログURL」をブログURLに差し替え、デザイン > カスタマイズ > フッタ に入れてください。
  2. 上の CSSを デザイン > カスタマイズ > デザインCSS に入れてください。
<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="あなたのブログURL"><i class="blogicon-home"></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>

お問い合わせ等

当記事内のスクリプト使用によるいかなる損害についても責任を負いかねますので自己責任でご使用ください。

お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。

はてなブログの記事タイトルの一部を装飾する
Windows に MongoDB をインストールする
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/06/26

WordPress:Aレコード変更でウェブだけ他サーバへ移転

2022/06/13

WordPress Popular Posts 他のプラグインに変えたほうがいいかも

2022/06/06

WordPress Popular Posts 表示されないを解決する

2022/06/03

WordPress Popular Posts 表示されない(解決だが…)

2022/05/29

WordPress:テーマをゼロから作ってみる(2)

最新記事を一覧で見る

よく読まれている記事

カテゴリー

  • はてなブログ211
  • WebTips108
  • javascript95
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress34
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php18
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • cms-style10
  • Chrome10
  • iPhone9
  • Git入門6
  • genesis6
  • Android4
  • Python4
  • ConoHa WING4
  • 静的サイトジェネレーター3
  • Firefox3
  • Blankslate3
  • Docker3
  • SSD3
  • Facebook3
  • スマートフォン3
  • GitHub2
  • Mactype2
  • 映画1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com