Home-theater-designers
Nút 'cuộn lên đầu' được sử dụng để đưa chế độ xem của bạn trở lại đầu trang một cách dễ dàng. Tính năng UX nhỏ này rất phổ biến trong các trang web hiện đại. Nó đặc biệt hữu ích cho các trang web có nhiều nội dung, chẳng hạn như các ứng dụng một trang.
cách tạo đường viền cho văn bản trong photoshop
Trong bài viết này, bạn sẽ học cách tạo nút cuộn lên đầu bằng JavaScript và jQuery.
Cách tạo nút cuộn lên đầu bằng JavaScript
Bạn có thể thêm nút cuộn lên đầu trang web của mình bằng đoạn mã sau:
Mã 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.
Ở đây, cấu trúc cơ bản của trang web được tạo bằng dữ liệu giả. Bạn chỉ cần tập trung vào nút cuộn lên trên cùng.
Khi nhấp vào nút này, trang sẽ được cuộn lên trên cùng. Điều này sẽ hoạt động sau khi thêm mã jQuery.
Mã jQuery
Có liên quan: Tìm hiểu cách tạo một phần tử trong 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');
});Đây, chỉ lớp được thêm vào phần tử nút nếu người dùng cuộn hơn 300 pixel trên trang web. Cái này chỉ lớp làm cho phần tử nút hiển thị. Theo mặc định, khả năng hiển thị của phần tử nút được giữ ẩn. Thông tin chi tiết về nút có trong mã CSS sau đây.
Mã CSS
Có liên quan: Ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phút
#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 trên được sử dụng để tạo kiểu cho nút cuộn lên đầu và trang web. Bạn có thể sử dụng mã CSS và tạo kiểu cho nút theo yêu cầu của mình.
Bây giờ bạn có một nút cuộn lên đầu trang / quay lại đầu trang đầy đủ chức năng. Nếu bạn muốn xem mã nguồn hoàn chỉnh được sử dụng trong bài viết này, đây là Kho lưu trữ GitHub của cùng một.
Ghi chú : Mã được sử dụng trong bài viết này là MIT được cấp phép .
Tìm hiểu thêm về trải nghiệm người dùng
Trải nghiệm người dùng tập trung vào việc một sản phẩm có đáp ứng được nhu cầu của người dùng hay không. Nếu bạn là nhà thiết kế hoặc nhà phát triển, bạn nên tuân thủ các nguyên tắc thiết kế UX và tạo ra các sản phẩm tuyệt vời. Nếu sở thích lĩnh vực này là của bạn, bạn phải đi theo con đường chính xác để bắt đầu.
cách xem mật khẩu đã lưu trong triển vọngĐăng lại Đăng lại tiếng riu ríu E-mail Bạn muốn trở thành một nhà thiết kế UX? Đây là cách bắt đầu
Nhiệm vụ của Nhà thiết kế người dùng là đảm bảo rằng nhu cầu của người dùng phần mềm được quan tâm và họ hài lòng trong quá trình này.
Đọc tiếp Chủ đề liên quan- Lập trình
- JavaScript
- jQuery
Yuvraj là sinh viên ngành Khoa học Máy tính tại Đại học Delhi, Ấn Độ. Anh ấy đam mê Phát triển Web Full Stack. Khi không viết, anh ấy đang khám phá chiều sâu của các công nghệ khác nhau.
Xem thêm từ Yuvraj ChandraTheo dõi bản tin của chúng tôi
Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!
Bấm vào đây để đăng ký