[jquery] jQuery를 사용하여 페이지를 앵커로 스크롤하는 방법은 무엇입니까?

페이지의 위 또는 아래에서 로컬 앵커에 대한 링크를 클릭 할 때 슬라이드 효과를 포함시키는 방법을 찾고 있습니다.

나는 당신이 그렇게 링크가있는 것을 원합니다 :

<a href="#nameofdivetc">link text, img etc.</a>

아마도 클래스가 추가 되었으므로이 링크가 슬라이딩 링크가되고 싶다는 것을 알 수 있습니다.

<a href="#nameofdivetc" class="sliding-link">link text, img etc.</a>

그런 다음이 링크를 클릭하면 페이지가 위 또는 아래로 이동하여 원하는 위치 (div, 제목, 페이지 상단 등)가 될 수 있습니다.


이것이 내가 이전에했던 것입니다 :

    $(document).ready(function(){
    $(".scroll").click(function(event){
        //prevent the default action for the click event
        event.preventDefault();

        //get the full url - like mysitecom/index.htm#home
        var full_url = this.href;

        //split the url by # and get the anchor target name - home in mysitecom/index.htm#home
        var parts = full_url.split("#");
        var trgt = parts[1];

        //get the top offset of the target anchor
        var target_offset = $("#"+trgt).offset();
        var target_top = target_offset.top;

        //goto that anchor by setting the body scroll top to anchor top
        $('html, body').animate({scrollTop:target_top}, 1500, 'easeInSine');
    });
});



답변

기술

다음을 사용하여이 작업을 수행 할 수 있습니다 jQuery.offset()jQuery.animate().

jsFiddle Demonstration을 확인하십시오 .

견본

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

scrollToAnchor('id3');

추가 정보


답변

href 속성이 동일한 이름을 가진 태그 ID를 가진 div에 연결 한다고 가정하면 다음 코드를 사용할 수 있습니다.

HTML

<a href="#goto" class="sliding-link">Link to div</a>

<div id="goto">I'm the div</div>

자바 스크립트-(Jquery)

$(".sliding-link").click(function(e) {
    e.preventDefault();
    var aid = $(this).attr("href");
    $('html,body').animate({scrollTop: $(aid).offset().top},'slow');
});


답변

이것은 내 인생을 훨씬 쉽게 만들었습니다. 기본적으로 요소 id 태그와 많은 코드없이 스크롤합니다.

http://balupton.github.io/jquery-scrollto/

자바 스크립트에서

$('#scrollto1').ScrollTo();

귀하의 HTML에서

<div id="scroollto1">

여기에 나는 페이지 끝까지


답변

function scroll_to_anchor(anchor_id){
    var tag = $("#"+anchor_id+"");
    $('html,body').animate({scrollTop: tag.offset().top},'slow');
}


답변

또한 대상에 패딩이 있으므로 position대신 을 사용하는 것을 고려해야합니다 offset. 대상과 겹치지 않으려는 잠재적 탐색 모음을 설명 할 수도 있습니다.

const $navbar = $('.navbar');

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();

    const scrollTop =
        $($(this).attr('href')).position().top -
        $navbar.outerHeight();

    $('html, body').animate({ scrollTop });
})


답변

jQuery를 사용한 나의 접근 방식은 모든 임베디드 앵커 링크를 즉시 점프하는 대신 슬라이드하게 만듭니다.

Santi Nunez 의 답변과 실제로 비슷 하지만 더 안정적입니다. 입니다.

지원하다

  • 다중 프레임 워크 환경.
  • 페이지로드가 완료되기 전에
<a href="#myid">Go to</a>
<div id="myid"></div>
// Slow scroll with anchors
(function($){
    $(document).on('click', 'a[href^=#]', function(e){
        e.preventDefault();
        var id = $(this).attr('href');
        $('html,body').animate({scrollTop: $(id).offset().top}, 500);
    });
})(jQuery);


답변

나는 원래 코드를 고수 하고이 코드를 사용하는 ‘back-to-top’링크에 페이드를 포함 시켰으며 여기에서도 약간의 코드를 사용했습니다.

http://webdesignerwall.com/tutorials/animated-scroll-to-top

잘 작동합니다 🙂