[JavaScript] top button, bottom button
2021. 2. 15. 23:11ㆍHTML&CSS&JavaScript
$(function() {
var scrollBottom = $(document).height() - $(window).height() - $(window).scrollTop();
// 보이기 | 숨기기
$(window).scroll(function() {
if ($(this).scrollTop() < 200) {
//200 넘으면 버튼이 보임
$('.top-button').fadeOut(),
$('.bottom-button').fadeOut();
} else {
$('.top-button').fadeIn(),
$('.bottom-button').fadeIn();
}
});
// 버튼 클릭시 0 까지 animation 이동
$(".top-button").click(function() {
$('html, body').animate({
scrollTop : 0 }, 200); // 속도 200
return false;
}),
$(".bottom-button").click(function() {
$('html, body').animate({
scrollTop : scrollBottom }, 200); // 속도 200
return false;
});
});
'HTML&CSS&JavaScript' 카테고리의 다른 글
[JavaScript] 스크롤 고정 및 해제 방법 (0) | 2021.02.17 |
---|---|
[HTML&CSS] 텍스트 줄넘침 해결 방법(2가지) (0) | 2021.02.17 |
[javaScript] URL의 파라미터를 찾는 함수 (0) | 2021.02.12 |
[javaScript] setTimeout(), clearTimeout() (0) | 2021.02.11 |
[javaScript] LocalStorage & SessionStorage 사용법 (0) | 2021.02.11 |