페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 앵커 포인트를 추가하는 두 가지 방법
- 青灯夜游앞으로
- 2018-11-13 14:06:374521검색
페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 이 문서에서는 페이지에 앵커 포인트를 추가하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
방법 1: a 태그를 사용하여 추가
1. a 태그의 href 속성을 설정하여 페이지에서 지정된 id 태그 위치로 이동합니다
2. a 태그의 속성 값은 로고로서 현재 페이지 내부로 점프한다는 의미입니다
간단한 경우:
<html> <head></head> <body> <!--设置锚点的a标签--> <a href='#miao'>跳一跳</a> <br /> <!--跳转到的锚点位置--> <h3 id='miao'>跳到这里..</h3> </body> </html>
이 방법에는 주소 표시줄 매개변수 변경, 점프가 갑작스럽고 사용자 친화적이지 않은 등 많은 단점이 있습니다. ...
그러므로, 이 부분에 좀 더 주의를 기울이고 강박장애가 있는 경우에는 다음과 같은 방법을 사용하는 것이 좋습니다.
방법 2: jQuery의 애니메이션 애니메이션을 사용하여 점프
더 이상 고민하지 말고 코드부터 시작하겠습니다.
<html>
<head>
<title></title>
<script>
$(document).ready(function () {
//点击触发事件
$("#jumpNow").click(function () {
$("html,body").animate({
scrollTop: $("#imhere").offset().top//跳转到的位置
}, {
duration: 400,//预定速度
easing: "swing",//动画效果.swing:在开头/结尾移动慢，在中间移动快;"linear": 匀速移动
});
});
});
</script>
</head>
<body>
<!--设置锚点的标签-->
<span id='jumpNow'>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id='imhere'>跳到这里...</h3>
</body>
</html>
jQuery의 애니메이션은 페이지 애니메이션을 구현하는 함수로 비교적 강력한 기능을 가지고 있습니다. 앵커 포인트 점프가 충분합니다. animate 기능을 익히고 싶다면 다음을 참고하세요: [jQuery - Animate 심층 학습(1)]
주소 표시줄의 매개변수를 변경하지 않고도 애니메이션 점프의 속도와 방법을 제어할 수 있는 방법입니다. , 이는 비교적 우아합니다. 이 방법을 사용하는 것이 좋습니다!
요약: 위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 동영상 튜토리얼을 보려면 jQuery Tutorial을 추천합니다.
위 내용은 페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 앵커 포인트를 추가하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!