Home-theater-designers
'맨 위로 스크롤' 버튼은 보기를 페이지 맨 위로 쉽게 되돌리는 데 사용됩니다. 이 작은 UX 기능은 현대 웹사이트에서 매우 일반적입니다. 단일 페이지 응용 프로그램과 같이 콘텐츠가 많은 웹 페이지에 특히 유용합니다.
그래픽 카드 창 10을 확인하는 방법
이 기사에서는 JavaScript와 jQuery를 사용하여 위로 스크롤 버튼을 만드는 방법을 배웁니다.
JavaScript를 사용하여 맨 위로 스크롤 버튼을 만드는 방법
다음 코드 스니펫을 사용하여 웹사이트에 맨 위로 스크롤 버튼을 추가할 수 있습니다.
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.
여기서는 더미 데이터로 웹페이지의 기본 구조를 생성합니다. 위로 스크롤 버튼에만 집중하면 됩니다.
이 버튼을 클릭하면 페이지가 맨 위로 스크롤됩니다. 이것은 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');
});여기서, 보여 주다 사용자가 웹 페이지에서 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는 위로 스크롤 버튼과 웹 페이지의 스타일을 지정하는 데 사용됩니다. CSS 코드로 플레이하고 요구 사항에 따라 버튼의 스타일을 지정할 수 있습니다.
이제 완전히 작동하는 위로 스크롤/위로 뒤로 버튼이 있습니다. 이 기사에 사용된 전체 소스 코드를 보려면 여기를 참조하십시오. GitHub 저장소 동일한의.
메모 : 이 글에서 사용한 코드는 MIT 라이선스 .
사용자 경험에 대해 자세히 알아보기
사용자 경험은 제품이 사용자의 요구를 충족하는지 여부에 중점을 둡니다. 디자이너나 개발자라면 UX 디자인 원칙을 따르고 멋진 제품을 만드는 것이 좋습니다. 이 분야에 관심이 있는 경우 시작하려면 올바른 경로를 따라야 합니다.
친구들과 할만한 모바일 게임공유하다 공유하다 트위터 이메일 UX 디자이너가 되고 싶으신가요? 시작하는 방법은 다음과 같습니다.
소프트웨어 사용자의 요구 사항이 처리되고 프로세스에서 만족하는지 확인하는 것이 UX 디자이너의 역할입니다.
다음 읽기 관련 항목- 프로그램 작성
- 자바스크립트
- 제이쿼리
Yuvraj는 인도 델리 대학교의 컴퓨터 공학 학부생입니다. 그는 풀 스택 웹 개발에 열정적입니다. 그는 글을 쓰지 않을 때 다양한 기술의 깊이를 탐구하고 있습니다.
유브라지 찬드라가 참여한 작품 더보기뉴스레터 구독
기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!
구독하려면 여기를 클릭하세요.