Home-theater-designers
「一番上にスクロール」ボタンを使用すると、ビューをページの一番上に簡単に戻すことができます。この小さなUX機能は、最近のWebサイトでは非常に一般的です。これは、単一ページアプリケーションのように、コンテンツが多いWebページに特に役立ちます。
iPhoneの写真をPCに転送する方法
この記事では、JavaScriptとjQueryを使用して上にスクロールするボタンを作成する方法を学習します。
JavaScriptを使用して上にスクロールボタンを作成する方法
次のコードスニペットを使用して、Webサイトに上にスクロールするボタンを追加できます。
HTMLコード
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
ここでは、ダミーデータを使用してWebページの基本構造を作成しています。上にスクロールするボタンに焦点を合わせるだけです。
このボタンをクリックすると、ページが一番上にスクロールされます。これは、jQueryコードを追加した後に機能します。
jQueryコード
関連している： jQueryで要素を作成する方法を学ぶ
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});ここでは、 見せる ユーザーがWebページを300ピクセル以上スクロールすると、ボタン要素にクラスが追加されます。この 見せる クラスはボタン要素を表示します。デフォルトでは、ボタン要素の表示は非表示のままです。ボタンの詳細については、次のCSSコードを参照してください。
CSSコード
関連している： 10分で学ぶことができる簡単なCSSコード例
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}上記のCSSは、上にスクロールボタンとWebページのスタイルを設定するために使用されます。 CSSコードで遊んだり、要件に応じてボタンのスタイルを設定したりできます。
これで、完全に機能する上にスクロール/上に戻るボタンができました。この記事で使用されている完全なソースコードを確認したい場合は、こちらをご覧ください。 GitHubリポジトリ 同じの。
ノート ：この記事で使用されているコードは MITライセンス 。
ユーザーエクスペリエンスの詳細
ユーザーエクスペリエンスは、製品がユーザーのニーズを満たしているかどうかに焦点を当てています。デザイナーまたは開発者の場合は、UXデザインの原則に従い、すばらしい製品を作成することをお勧めします。この分野に関心がある場合は、正しいパスをたどって開始する必要があります。
USBからMacOSを再インストールする方法共有 共有 つぶやき Eメール UXデザイナーになりたいですか？開始方法は次のとおりです
ソフトウェアユーザーのニーズに対応し、その過程でユーザーが喜んでいることを確認するのは、UXデザイナーの仕事です。
次を読む 関連トピック- プログラミング
- JavaScript
- jQuery
Yuvrajは、インドのデリー大学のコンピュータサイエンス学部生です。彼はフルスタックWeb開発に情熱を注いでいます。執筆していないときは、さまざまなテクノロジーの深さを探っています。
YuvrajChandraのその他の作品ニュースレターを購読する
ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。
購読するにはここをクリックしてください