Webページの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプト -pagemap | コリス

2019/08/28 61 users コリス スクリプト 自動生成 構成 マップ

Webページ内のコンテンツの構成を取得し、ページ全体を把握できるマップを自動生成するスクリプトを紹介します。マップはページ内リンクにも対応しています。 pagemap pagemap -GitHub pagemapの特徴 pagemapのデモ pagemapの使い方 pagemapの特徴 pagemapはページ全体の構成を取得し、全体を把握できるマップを自動生成... 続きを読む

ページ内リンクが固定ヘッダと重なって隠れる問題を解決するCSSのテクニック | コリス

2019/04/08 156 users コリス CSS ヘッダ 固定ヘッダ テクニック

ここ数年で、スクロールしてもヘッダが上部に固定配置されているページが増えてきました。UX的には便利な面もありますが、その反面問題もあります。固定ヘッダがあるページでページ内リンクをクリックすると、移動した先が固定ヘッダに重なって隠れます。 そこでscroll-snapプロパティの登場です。scroll-snapのscroll-p... 続きを読む

今どきのスムーズスクロール(2019年版) - to-R Media

2019/03/15 175 users スムーズスクロール jQuery しょうが お世辞 今どき

ページ内リンクをスムーズスクロールで行いたい場合はどのようにすればよいでのしょうか？ jQueryを利用すれば簡単に対応できますが、非jQueryの案件ですと悩みものです。 筆者は12年前にjQuery非依存のスムーズスクロールのJavaScriptライブラリ「smoothScroll.js」をリリースしていますがお世辞にも今の時代に利用する... 続きを読む

ページ内リンクの実装から考える、<a>要素のclickイベントとその振る舞い - シフトブレイン／スタンダードデザインユニット

2018/10/26 80 users スタンダードデザインユニット スムーズスクロール 実装 要素

この他に macOS の Chrome では、ShiftキーとMetaキーを併用することで、新しいタブで開きつつそのタブをアクティブにすることができました。 CSS によるスムーズスクロール ページ内リンクをクリックしたときのスクロールを、アニメーションによってスムーズにしたいということはよくあります。これは CSS のscroll-beh... 続きを読む

jQuery：ページトップへの動きに使えるエフェクト 5 | NxWorld

2015/07/07 106 users jQuery NxWorld スムーズスクロール エフェクト

閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 ※以下で紹介している方法はいずれもjQueryを使用していますので、予め読み込ま... 続きを読む

ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験 | WWW WATCH

2015/05/15 261 users WWW WATCH 一瞬 実験 瞬時 親切心

タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript... 続きを読む

caramel*vanilla » ページ内リンクをわかりやすくするJavaScript

2006/10/08 2634 users 一瞬 先頭 caramel*vanilla オシャ リンク

リンク先を視覚的にわかりやすくする del.icio.us経由で面白そうなJavaScriptをみつけました。 ブログでもサイトでもよく見る「このページの先頭へ」のリンク。長～いページだとそのリンクで一瞬に先頭に行ってしまい、読んでいる人が混乱することもよくあります。 そこでご紹介したいのが「するするるーーー」と先頭まで戻ってくれるJavascript。 [ このページの先頭へ、をちょこっとおしゃ... 続きを読む

Alertbox: ページ内リンクの使用は避けよう（2006年2月21日）

2006/03/14 106 users ハイパーテキスト AlertBox 要約 混乱 コラム

要約： ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1： 今、リンクをクリ... 続きを読む