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');
    });
});

답변

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

scrollToAnchor('id3');

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

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

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

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

<div id="scroollto1">

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

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

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

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

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

<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);