이 글에서는 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 id="网页内容">网页内容</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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
MinGW - Windows용 미니멀리스트 GNU
이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.
