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

176

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

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

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

— ade123
소스

427

기술

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

jsFiddle Demonstration을 확인하십시오 .

견본

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

scrollToAnchor('id3');

추가 정보

— dknaack
소스

52

또한 페이지의 모든 내부 앵커 링크와 함께 작동하도록 일반화 할 수 있습니다.

$("a[href^=#]").click(function(e) {   e.preventDefault();   var dest = $(this).attr('href');   console.log(dest);   $('html,body').animate({ scrollTop: $(dest).offset().top }, 'slow'); });

— bardo

@ bardo, 어떻게 구현되어야합니까? dkmaack의 솔루션을 귀하의 솔루션으로 대체했지만 슬라이딩이 없습니다 (앵커 자체가 작동합니다). 내가 무엇을 놓치고 있습니까?

— jakub

1

@bardo는 또한 history.pushState(null, null, dest);기본 위치 해시 변경을 방지하면서 추가 합니다

— Mike Causer

7

참고로 @bardo의 솔루션 외에도 최신 jQuery를 사용할 때 해시를 피해야합니다. $ ( "a [href ^ = \\ #]") stackoverflow.com/questions/7717527/…

— jaegs

1

html과 body 모두에 애니메이션을 적용하는 목적은 무엇입니까? 우리가하는 일을 모르고 모든 것을하는 상황처럼 보입니다. 이것이 여러 스콜 링을 시작할 수 있습니까?

— ygoe

30

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

— 산티 누네즈
소스

1

매우 간단하지만 강력한 솔루션으로 완벽한 제어가 가능합니다. 나는이 대답이 더 많은 투표를 받아야한다고 생각한다.

— cronfy

합의, 이것은 최선의 솔루션이며 나에게 많은 도움이

— probablybest

작동하지만 사용 목적을 무효화합니다 name. 를 사용할 때 <a name="something"></a>외부에서도 참조 할 수는 있지만 솔루션에서 제공하지는 않습니다.

— Ramtin

8

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

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

자바 스크립트에서

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

귀하의 HTML에서

<div id="scroollto1">

여기에 나는 페이지 끝까지

— Bobthenob
소스

7

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

— 이베 수스
소스

3

진짜 질문입니다. + ""는 두 번째 줄에서 무엇을합니까?

— Rob

@Rob javascript에는 문자열 보간이 없으므로 +문자열이나 vars와 함께 사용하면 다음 과 같이 연결됩니다 "#some_anchor". 실제로 두 번째 연결 anchor_id + ""은 필요하지 않습니다.

— onebree

감사합니다 @onebree 그것은 내가 궁금해하는 두 번째 연결이었습니다 :)

— Rob

5

또한 대상에 패딩이 있으므로 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 });
})

— 매트
소스

고정 탐색 메뉴 용 CSS에서 추가 클래스와 성가신 패딩 수학이 필요하지 않기 때문에 최상의 솔루션 IMHO

— KSPR

그러나 이것은 URL에서 앵커 태그를 다시 쓰지 않습니다. history.pushState({}, "", this.href);URL을 최신 상태로 유지하기 위해 추가

— KSPR

3

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

— 티모 후 비니 넨
소스

2

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

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

잘 작동합니다 :)

— ade123
소스

1

offsetTop 및 scrollTop 을 추가 할 수 있습니다전체 페이지가 아니라 일부 중첩 된 컨텐츠를 애니메이션하는 경우 값 .

예 :

var itemTop= $('.letter[name="'+id+'"]').offset().top;
var offsetTop = $someWrapper.offset().top;
var scrollTop = $someWrapper.scrollTop();
var y = scrollTop + letterTop - offsetTop

this.manage_list_wrap.animate({
  scrollTop: y
}, 1000);

— 턱시도
소스

0

SS 슬로우 스크롤

이 솔루션에는 앵커 태그가 필요하지 않지만 물론 메뉴 버튼 (예 : 임의 속성, 'ss')을 HTML의 대상 요소 ID와 일치시켜야합니다.

ss="about" 당신을 데려다 id="about"

$('.menu-item').click(function() {
	var keyword = $(this).attr('ss');
	var scrollTo = $('#' + keyword);
	$('html, body').animate({
		scrollTop: scrollTo.offset().top
	}, 'slow');
});

.menu-wrapper {
  display: flex;
  margin-bottom: 500px;
}
.menu-item {
  display: flex;
  justify-content: center;
  flex: 1;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 80%, 1);
  background-color: hsla(0, 0%, 20%, 1);
  cursor: pointer;
}
.menu-item:hover {
  background-color: hsla(0, 40%, 40%, 1);
}

.content-block-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  line-height: 30px;
  color: hsla(0, 0%, 90%, 1);
  background-color: hsla(0, 50%, 50%, 1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="menu-wrapper">
  <div class="menu-item" ss="about">About Us</div>
  <div class="menu-item" ss="services">Services</div>
  <div class="menu-item" ss="contact">Contact</div>
</div>

<div class="content-block-header" id="about">About Us</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="services">Services</div>
<div class="content-block">
Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>
<div class="content-block-header" id="contact">Contact</div>
<div class="content-block">
  Lorem ipsum dolor sit we gonna chung, crazy adipiscing phat. Nullizzle sapizzle velizzle, shut the shizzle up volutpizzle, suscipizzle quizzle, away vizzle, arcu. Pellentesque my shizz sure. Sed erizzle. I'm in the shizzle izzle funky fresh dapibus turpis tempus shizzlin dizzle. Maurizzle my shizz nibh izzle turpizzle. Gangsta izzle fo shizzle mah nizzle fo rizzle, mah home g-dizzle. I'm in the shizzle eleifend rhoncizzle fo shizzle my nizzle. In rizzle habitasse crazy dictumst. Yo dapibus. Curabitizzle tellizzle urna, pretizzle break it down, mattis izzle, eleifend rizzle, nunc. My shizz suscipit. Integer check it out funky fresh sizzle pizzle.

That's the shizzle et dizzle quis nisi sheezy mollis. Suspendisse bizzle. Morbi odio. Vivamizzle boofron. Crizzle orci. Cras mauris its fo rizzle, interdizzle a, we gonna chung amizzle, break it down izzle, pizzle. Pellentesque rizzle. Vestibulum its fo rizzle mi, volutpat uhuh ... yih!, ass funky fresh, adipiscing semper, fo shizzle. Crizzle izzle ipsum. We gonna chung mammasay mammasa mamma oo sa stuff brizzle yo. Cras ass justo nizzle purizzle sodales break it down. Check it out venenatizzle justo yo shut the shizzle up. Nunc crackalackin. Suspendisse bow wow wow placerizzle sure. Fizzle eu ante. Nunc that's the shizzle, leo eu gangster hendrerizzle, gangsta felis elementum pizzle, sizzle aliquizzle crunk bizzle luctus pede. Nam a nisl. Fo shizzle da bomb taciti gangster stuff i'm in the shizzle i'm in the shizzle per conubia you son of a bizzle, per inceptos its fo rizzle. Check it out break it down, neque izzle cool nonummy, tellivizzle orci viverra leo, bizzle semper risizzle arcu fo shizzle mah nizzle.
</div>

스 니펫 확장

깡깡이

https://jsfiddle.net/Hastig/stcstmph/4/

— 하스 티그 주암 멘 스텔 렌
소스

0

나를 위해 일한 해결책이 있습니다. 이것은 a이름이 지정된 모든 태그에 작동하는 일반 함수입니다.a

$("a[href^=#]").on('click', function(event) { 
    event.preventDefault(); 
    var name = $(this).attr('href'); 
    var target = $('a[name="' + name.substring(1) + '"]'); 
    $('html,body').animate({ scrollTop: $(target).offset().top }, 'slow'); 
});

참고 1 : "HTML에 큰 따옴표를 사용해야합니다 . 작은 따옴표를 사용하는 경우 위 코드 부분을 다음과 같이 변경하십시오.var target = $("a[name='" + name.substring(1) + "']");

참고 2 : 일부 경우, 특히 부트 스트랩에서 고정 막대를 사용하면 이름 a이 탐색 막대 아래에 숨겨집니다. 이러한 경우 (또는 유사한 경우) 스크롤에서 픽셀 수를 줄여 최적의 위치를 얻을 수 있습니다. 예를 들어 $('html,body').animate({ scrollTop: $(target).offset().top - 15 }, 'slow');받는 당신을 데려 갈 것이다 target상단에 남아있는 15 개 픽셀.

— 람틴
소스

0

https://css-tricks.com/snippets/jquery/smooth-scrolling/ 에서이 예제를 우연히 발견하여 모든 코드 줄을 설명했습니다. 나는 이것이 최선의 선택임을 알았다.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

당신은 네이티브 갈 수 있습니다 :

window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' 
});

window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});

또는 jquery로 :

$('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event) {

    if (
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
        && location.hostname == this.hostname
       ) {

      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');

      if (target.length) {
        event.preventDefault();
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
      }
    }
  });

— 프랭키
소스

0

가장 간단한 방법은 다음과 같습니다.-

클릭 기능 (Jquery) 내에서 :-

$('html,body').animate({scrollTop: $("#resultsdiv").offset().top},'slow');

HTML

<div id="resultsdiv">Where I want to scroll to</div>

— Mikeys4u
소스

-1

$(function() {
    $('a#top').click(function() {
        $('html,body').animate({'scrollTop' : 0},1000);
    });
});

여기에서 테스트하십시오.

http://jsbin.com/ucati4

— 사비 싱
소스

3

서명, 링크, 특히 사람 ... 그리고 포함하지 마십시오 특히 관련이없는 링크 것들. 당신은 당신의 프로필에 그런 종류를 넣을 수 있습니다.

— 앤드류 이발소

질문은 페이지 상단으로 스크롤하는 방법이 아니라 ID가있는 앵커로 스크롤하는 방법이었습니다.

— user1380540

WordPress에서 사용할 수있는 방법이 있습니까? 내 사이트에 추가하고 있지만 실제로 작동하지 않습니다. 여기 링크 : scentology.burnnotice.co.za

— 사용자 에이전트

-1

다음 솔루션이 나를 위해 일했습니다.

$("a[href^=#]").click(function(e)
        {
            e.preventDefault();
            var aid = $(this).attr('href');
            console.log(aid);
            aid = aid.replace("#", "");
            var aTag = $("a[name='"+ aid +"']");
            if(aTag == null || aTag.offset() == null)
                aTag = $("a[id='"+ aid +"']");

            $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
        }
    );

— 베루스
소스