> 웹 프론트엔드 > JS 튜토리얼 > JavaScript를 사용하여 Anchors_javascript 기술 간 원활한 점프 달성

JavaScript를 사용하여 Anchors_javascript 기술 간 원활한 점프 달성

WBOY
풀어 주다: 2016-05-16 18:46:59
원래의
1104명이 탐색했습니다.

많은 사람들이 Anchor에 익숙하다고 생각합니다. 이는 방문자가 페이지의 다른 위치로 빠르게 이동하고 관심 있는 콘텐츠를 직접 찾을 수 있도록 돕습니다. RSS가 전체 웹사이트의 요약이라면 앵커는 페이지의 요약입니다. . 일반적으로 페이지에 많은 콘텐츠가 포함되어 있으면 앵커 포인트를 사용하여 위치를 지정합니다.

그러나 앵커 포인트에도 문제가 있습니다. 일반적으로 앵커 포인트를 클릭하면 페이지가 즉시 대상 위치로 이동합니다. 그러나 이 기사에서 소개하는 방법은 앵커 포인트 사이를 원활하게 점프합니다. ), 효과가 매우 좋습니다.

코드 복사 코드는 다음과 같습니다.

🎜>


호출 방법 :




코드 복사


코드는 다음과 같습니다

scroller(el, Duration)
el : 대상 앵커 ID
duration : 기간, 밀리초 단위, 작을수록 빠름 코드 복사


코드는 다음과 같습니다.




header_1 --> header_4





header_2 --> header_5





header_3 --> header_6





header_4 --> header_7





header_5 --> header_3





header_6 --> header_2





header_7 --> header_1




测试代码:
复代码 代码如下:







用 Javascript 实现锚点(Anchor)间平滑跳转 - 平滑, 锚点, Anchor, 跳转, 滚动, javascript,














Javascript를 사용하여 앵커 구현 포인트(앵커) 부드러운 점프



                                                                                          ********************************* 예제 코드 시작****************** *******************-->




    
    header_1 --> header_4
    





    
    header_2 --> header_5
    





    
    header_3 --> header_6
    





    
    header_4 --> header_7
    





    
    header_5 --> header_3
    





    
    header_6 --> header_2
    





    
    header_7 --> header_1
    







    


    











관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿