페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 앵커 포인트를 추가하는 두 가지 방법-JS 튜토리얼-php.cn

방법 1: a 태그를 사용하여 추가 " >방법 1: a 태그를 사용하여 추가

집

웹 프론트엔드

JS 튜토리얼

페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 앵커 포인트를 추가하는 두 가지 방법

青灯夜游

Nov 13, 2018 pm 02:06 PM

html jquery 앵커 포인트

페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 이 문서에서는 페이지에 앵커 포인트를 추가하는 두 가지 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

방법 1: a 태그를 사용하여 추가

1. a 태그의 href 속성을 설정하여 페이지에서 지정된 id 태그 위치로 이동합니다

2. a 태그의 속성 값은 로고로서 현재 페이지 내부로 점프한다는 의미입니다

간단한 경우:

<html>
<head></head>
<body>
<!--设置锚点的a标签-->
<a href=&#39;#miao&#39;>跳一跳</a>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;miao&#39;>跳到这里..</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=&#39;jumpNow&#39;>跳一跳</span>
<br />
<!--跳转到的锚点位置-->
<h3 id=&#39;imhere&#39;>跳到这里...</h3>
</body>

</html>

로그인 후 복사

jQuery의 애니메이션은 페이지 애니메이션을 구현하는 함수로 비교적 강력한 기능을 가지고 있습니다. 앵커 포인트 점프가 충분합니다. animate 기능을 익히고 싶다면 다음을 참고하세요: [jQuery - Animate 심층 학습(1)]

주소 표시줄의 매개변수를 변경하지 않고도 애니메이션 점프의 속도와 방법을 제어할 수 있는 방법입니다. , 이는 비교적 우아합니다. 이 방법을 사용하는 것이 좋습니다!

요약: 위 내용은 모든 사람의 학습에 도움이 되기를 바랍니다. 더 많은 동영상 튜토리얼을 보려면 jQuery Tutorial을 추천합니다.

위 내용은 페이지에 앵커 포인트를 추가하는 방법은 무엇입니까? 앵커 포인트를 추가하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.