"jQuery"닻점 링크에서class를 대상 닻점 요소에 추가하고 강조 표시합니다

5060 단어 jQueryJavaScript
이것은 링크 대상이 다른 페이지의 앵커 포인트일 때 이 요소를 강조 표시하는 스크립트입니다.
이미지 표시
다음 페이지에 링크된 경우
▼ 이것은 정상적으로 표시되는 상황입니다.

▶ 닻사슬로 비행하는 경우입니다.
강조 표시에 class를 추가하여 앵커 포인트 부분을 강조 표시합니다.

자꾸 기억나세요?
코드는 다음과 같습니다.
jQuery를 사용하기 때문에 미리 헤드에 읽어주세요.
<head>
<!-- 例 -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
HTML
링크된 페이지 (앵커 포인트 포함) 의 코드 예제입니다.
<div>
ゆく河の流れは絶えずして、しかももとの水にあらず。淀みに浮かぶうたかたは、かつ消えかつ結びて、久しくとどまりたるためしなし。世の中にある人とすみかと、またかくのごとし。 
</div>

<div id="hoge">
祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへに風の前の塵に同じ。
</div>

<div>
雨にも負けず<br>風にも負けず<br>雪にも夏の暑さにも負けぬ
</div>
이 페이지의 #hoge 섹션에 연결합니다.
이 페이지에서 다음 스크립트를 가져오고active라는 클래스 이름을 부여하십시오.
※ 링크 소스가 아니라 링크 대상 페이지입니다.
또한 고정된 링크라면 창의 맨 위에 #hoge가 나타나기 때문에 맨 위에 공백을 살짝 넣어 적합하지 않게 합니다.
JavaScript
$(document).ready(function(){
    //▼ページ全体をフェードで表示させています。不要な場合は以下の二行は削除してください。
    $('body').hide();
    $('body').fadeIn('fast');
    //▲ここまでフェードの処理

    var anchor = $(location).attr('hash');  //アンカー名を取得
    var point = $(anchor).offset().top;     //要素の位置を取得
    var position = point - 100;             //余白

    //要素の位置（＋余白）までスクロール
    $('html,body').animate({
        scrollTop : position
    }, 400);

    //ハイライトするためのclass名を付与
    $(anchor).addClass('active');
});
CSS
하이라이터 스타일을 좋아해요.
/* ハイライトさせるclass名 */
.active {
    background-color: #ffffcc;
    box-shadow:0 0 0 3px red;
}
여기서 마치겠습니다.
링크로 날아갈 때 페이지의 중간을 표시하려면 어디를 봐야 합니까?가끔 이런 곤혹스러움이 있기 때문에 이런 처리가 편할 것 같습니다.
같은 페이지에 있는 닻 링크도 같은 스크립트로 대응할 수 있을까요?
문자열 "f002"및 "f001"을 화살표 이미지로 변경
[jQuery] slick.js의 응답 옵션 오류?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage