質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

322閲覧

AMPで使用できるスムーススクロール

MskKmt

総合スコア8

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

AMP(Accelerated Mobile Pages)

AMP(Accelerated Mobile Pages)は、Google社を始め複数のプラットフォームが共同で参加しているプロジェクト。モバイルユーザーのUX向上を目的とし、モバイルページの表示速度の高速化を図っています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/04/05 10:18

AMPでも使用できるようにcssのみのスムーススクロールを作りたいと思っています。
使用箇所は「ページのTOPに戻る」のサイト内リンクの移動時です。

現状、AMPではjavascriptが使用できず、CSSプロパティ『scroll-behavior』は対応しているブラウザがあまりにも少ない為、実用的ではありません。
ですので、どうにかcssアニメーションで挙動を再現できないか試行錯誤しているのですが、成果は芳しくありません。

どうか、皆様の知恵をお貸しください。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

defghi1977

2018/04/05 10:28

CSSだけで出来ないからCSSだけで出来るように「scroll-behavior」が提案されている. とすれば, かなり難しい気がします.
guest

回答1

0

こんな感じになるかなぁ

  • 通常のスクロールバーを殺しているので、ユーザビリティー的に難があります
  • ページ移動のためのダミーノードが存在するためセマンティクスの観点で難があります

※もっと良い方法があるかもしれません

HTML

1<div id="anchors"> 2 <a href="#p0">0</a> 3 <a href="#p1">1</a> 4 <a href="#p2">2</a> 5 <a href="#p3">3</a> 6</div> 7<div class="targets" id="p0"></div> 8<div class="targets" id="p1"></div> 9<div class="targets" id="p2"></div> 10<div class="targets" id="p3"></div> 11<div id="pages"> 12 <div>0</div> 13 <div>1</div> 14 <div>2</div> 15 <div>3</div> 16</div>

CSS

1/*スクロールバーを殺す*/ 2html,body{ 3 overflow: hidden; 4} 5/*ページ移動のためのリンク*/ 6#anchors{ 7 position: fixed; 8 z-index: 1; 9 bottom: 0; 10 left: 0; 11 background-color: yellow; 12} 13/*ハッシュによるtarget擬似クラスを有効化するためのダミーノード*/ 14.targets{ 15 display: none; 16} 17/*ページコンテナ(この位置をアニメーション化することでスクロールを表現する)*/ 18#pages{ 19 position: absolute; 20 width: 100%; 21 height: 100%; 22 top: 0; 23 left: 0; 24 overflow: visible; 25 transition: top 1s ease 0s; 26} 27/*ページの設定*/ 28#pages>div{ 29 width: 100%; 30 height: 100%; 31} 32#pages>div:nth-child(even){background-color: yellow;} 33#pages>div:nth-child(odd){background-color: orange;} 34 35/*ハッシュが当たっているノードによってtopをずらす*/ 36#p0:target~#pages{top: 0;} 37#p1:target~#pages{top: -100%;} 38#p2:target~#pages{top: -200%;} 39#p3:target~#pages{top: -300%;}

動作例
https://jsfiddle.net/defghi1977/n7xc0tme/2/

投稿2018/04/05 10:58

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問