jquery에서 웹 페이지를 클릭하여 맨 위로 돌아가는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)
- 藏色散人원래의
- 2018-10-13 13:53:486553검색
이 글에서는 jquery 코드를 사용하여 웹페이지를 최상위로 되돌리는 효과를 얻는 방법을 주로 소개합니다.
주요 웹사이트의 페이지를 탐색하다 보면 누구나 한 번쯤은 접해보셨을 텐데요, 긴 페이지를 탐색할 때 하단으로 스크롤을 내리면 맨 위로 돌아가는 것과 비슷한 버튼 효과가 나타납니다.
맨 위로 돌아가는 클릭의 특수 효과는 사용자 경험을 크게 향상시킬 수 있습니다. 그렇다면 그러한 기능을 구현하는 것은 매우 간단합니다.
이제 간단한 코드 예제를 사용하여 jquery를 사용하여 다시 맨 위로 클릭을 실현하는 기능적 방법을 소개하겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>回到顶部特效</title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
body {
text-align: center;
}
h1 {
width: 1200px;
height: 1500px;
background: #eee;
margin: 30px auto;
}
a {
text-decoration: none;
color: #fff;
}
p#back {
text-align: center;
position: fixed;
bottom: 100px;
right: 60px;
background: #000;
border-radius: 3px;
height: 50px;
width: 80px;
display: none;
}
</style>
</head>
<body>
<h1>网页内容</h1>
<a href=""><p id="back"><br> 返回顶部</p></a>
</body>
<script>
// 文档就绪
$(function () {
// 获取浏览器窗口
$(window).scroll(function () {
// 获取浏览器滚动条距离顶部的高度
if ($(window).scrollTop() > 150) {
// 设置按钮出现
$('#back').fadeIn(1000)
} else {
// 设置按钮消失
$('#back').fadeOut(1000)
}
})
})
</script>
</html>이 코드에서는 주로 jquery 온라인 라이브러리를 참조하고 간단한 HTML 페이지와 js 코드를 작성하여 상단 스크롤 막대의 높이가 150보다 크면 설정 버튼이 나타납니다. 설정 버튼이 나타납니다. 버튼이 숨겨져 있습니다. 마지막으로 브라우저를 통해 액세스하면 효과는 다음과 같습니다.
그런 다음 스크롤 막대를 아래로 드래그하면 맨 위로 돌아가는 버튼이 천천히 나타납니다. 효과는 다음과 같습니다.
참고:
fadeIn( ) 메서드는 페이드인 효과를 사용하여 선택된 요소가 숨겨져 있는 경우 이를 표시합니다. (이 예시에서는 매개변수가 1000밀리초로 설정되어 있습니다. 이는 선택한 요소의 페이드인 전환 시간이 1000밀리초라는 의미입니다. 0으로 설정하면 선택한 요소가 즉시 나타납니다.)
fadeOut( ) 이 메서드는 페이드 아웃 효과를 사용하여 요소가 숨겨진 경우 선택한 요소를 숨깁니다. (위와 동일한 매개변수)
이 글은 jquery를 사용하여 웹 페이지를 최상위로 되돌리는 효과를 구현하는 방법입니다. 간단하고 이해하기 쉬우므로 도움이 필요한 친구들에게 도움이 되기를 바랍니다.
프런트엔드 관련 지식에 대해 더 알고 싶다면 PHP 중국어 웹사이트 jQuery 비디오 튜토리얼 또는 HTML 비디오 튜토리얼, CSS 비디오 튜토리얼, Bootstrap 비디오 튜토리얼 및 기타 관련 비디오 튜토리얼을 따라갈 수 있습니다. , 참고하고 배우는 모든 사람을 환영합니다!
위 내용은 jquery에서 웹 페이지를 클릭하여 맨 위로 돌아가는 효과를 얻는 방법은 무엇입니까? (사진 + 동영상)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!