복붙노트

[JQUERY] 어떻게 위로 스크롤 또는 jQuery를 사용하여 앵커로 페이지 아래로 하는가?

JQUERY

어떻게 위로 스크롤 또는 jQuery를 사용하여 앵커로 페이지 아래로 하는가?

해결법

  1. 1.당신이 사용 jQuery.offset ()와 jQuery.animate을 할 수있다 ().

    당신이 사용 jQuery.offset ()와 jQuery.animate을 할 수있다 ().

    jsFiddle 데모를 확인하십시오.

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

scrollToAnchor('id3');

  2. 2.당신의 href 속성은 (평소처럼) 동일한 이름을 가진 태그 ID와 사업부에 연결되는 것을 가정하면,이 코드를 사용할 수 있습니다 :

    당신의 href 속성은 (평소처럼) 동일한 이름을 가진 태그 ID와 사업부에 연결되는 것을 가정하면,이 코드를 사용할 수 있습니다 :

    HTML

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

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

    JAVASCRIPT - (JQuery와)

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

  3. 3.이것은 너무 쉽게 내 인생을했다. 당신은 기본적으로 코드를 많이하지 않고 귀하의 요소 ID 태그와 그 스크롤에 넣어

    이것은 너무 쉽게 내 인생을했다. 당신은 기본적으로 코드를 많이하지 않고 귀하의 요소 ID 태그와 그 스크롤에 넣어

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

    에서 자바 스크립트

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

    당신의 HTML에서

    <div id="scroollto1">

    여기 페이지 아래로 모든 방법입니다

  4. 4.

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

  5. 5.또한 대상이 패딩을 가지고 있으며, 따라서 위치 대신 오프셋을 사용하는 것이 고려해야한다. 당신은 또한 당신이 목표를 중복되고 싶지 않아 잠재적 탐색 모음을 설명 할 수 있습니다.

    또한 대상이 패딩을 가지고 있으며, 따라서 위치 대신 오프셋을 사용하는 것이 고려해야한다. 당신은 또한 당신이 목표를 중복되고 싶지 않아 잠재적 탐색 모음을 설명 할 수 있습니다.

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

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

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

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

  6. 6.jQuery로 내 접근 방식은 임베디드 앵커 링크의 모든 즉시 대신 점프의 슬라이드로 만들려면

    jQuery로 내 접근 방식은 임베디드 앵커 링크의 모든 즉시 대신 점프의 슬라이드로 만들려면

    그것은 산티 누네즈으로 대답 정말 비슷하지만 더 신뢰할 수있다.

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

  7. 7.내 원래의 코드와 함께 붙어 있고 페이드를 포함 '백 - 투 - 맨'이 코드 여기 너무에서 조금의 링크 만들기 사용 :

    내 원래의 코드와 함께 붙어 있고 페이드를 포함 '백 - 투 - 맨'이 코드 여기 너무에서 조금의 링크 만들기 사용 :

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

    잘 작동합니다 :)

  8. 8.여기에 나를 위해 일한 솔루션입니다. 이것은라는 이름의 참조는 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 : 당신이 따옴표를 사용하십시오 "+) (name.substring + 1 ''= A [이름". 당신은 작은 따옴표를 사용하는 경우 HTML에서, VAR 대상 = $ (에 위의 코드 부분을 변경 " '] ");

    참고 2 : 부트 스트랩에서 끈적 막대를 사용하면 어떤 경우에는, 특히, 탐색 모음 아래에 의지 숨기기 이름. 이러한 경우 (또는 유사한 경우), 당신은 최적의 위치를 ​​달성하기 위해 스크롤에서 픽셀의 수를 줄일 수 있습니다. . $ ( 'HTML, 몸') 애니메이션 : 예를 들어, ({. scrollTop : $ (대상) .offset () 상단 - 15}, '느린'); 상단에 남아있는 15 개 픽셀을 목표로 이동합니다.

  9. 9.당신은 당신이 아니라 페이지 전체가 아니라 일부 중첩 된 내용을 애니메이션하는 경우 offsetTop 및 scrollTop 값을 추가 할 수 있습니다.

    당신은 당신이 아니라 페이지 전체가 아니라 일부 중첩 된 내용을 애니메이션하는 경우 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);

  10. 10.이 솔루션은 앵커 태그가 필요하지 않습니다하지만 당신은 HTML에서 대상 요소 ID와 메뉴 버튼 (예에서 임의의 속성, 'SS')을 일치 코스 필요성 않습니다.

    이 솔루션은 앵커 태그가 필요하지 않습니다하지만 당신은 HTML에서 대상 요소 ID와 메뉴 버튼 (예에서 임의의 속성, 'SS')을 일치 코스 필요성 않습니다.

    "약"SS는 = "에 대해"= ID로 이동

    $ ( '. 메뉴 항목'). () {(기능을 클릭 VAR 키워드 = $ (이) .attr ( 'SS'); VAR scrollTo = $ ( '#'+ 키워드); $ ( 'HTML, 몸'). 애니메이션 ({ scrollTop :. scrollTo.offset () 상단 }) '느리게'; }); .menu-래퍼 { 표시 : 플렉스; 마진 - 하단 : 500 픽셀; } .메뉴 아이템 { 표시 : 플렉스; 정당화 - 내용 : 센터; 플렉스 : 1; 폰트 크기 : 20 픽셀; 라인 높이 : 30 픽셀; 색상 : HSLA (0, 0 %, 80 %, 1); 배경색 : HSLA (0, 0 %, 20 %, 1); 커서 : 포인터; } .menu 항목 : 가져가 { 배경색 : HSLA (0, 40 %, 40 %, 1); } .content 블록 헤더 { 표시 : 플렉스; 정당화 - 내용 : 센터; 폰트 크기 : 20 픽셀; 라인 높이 : 30 픽셀; 색상 : HSLA (0, 0 %, 90 %, 1); 배경색 : HSLA (0, 50 %, 50 %, 1); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">

    회사 소개 < "에 대한"DIV 클래스 = "메뉴 항목"SS =>
    서비스
    연락처 회사 소개 < "에 대한"DIV 클래스 = "내용 블록 헤더"ID =>
    로렘 입숨 슬픔은 우리에게 거 충무로 미친 adipiscing 팻 앉아. Nullizzle sapizzle의 velizzle은 멀리 vizzle, arcu을 volutpizzle, suscipizzle quizzle까지 shizzle를 종료합니다. Pellentesque 내 shizz 확인합니다. SED erizzle. 나는 shizzle의 izzle 펑키 신선한에있어 dapibus turpis 템퍼 shizzlin 디즐. 내 shizz nibh izzle turpizzle Maurizzle. 갱스터 izzle FO shizzle 마작 nizzle FO rizzle, 마작 홈 g-디즐. 나는 shizzle eleifend rhoncizzle FO shizzle 내 nizzle에있어. rizzle에 미친 dictumst을 habitasse. 요 dapibus. Curabitizzle tellizzle의 urna, pretizzle 휴식을 아래로, mattis izzle, eleifend rizzle, NUNC. 내 shizz suscipit. 정수 신선한 지글 지글의 pizzle 펑키를 확인하십시오. 그 년대 shizzle 등 디즐 quis에 NiSi sheezy 몰리스. Suspendisse 비즐. Morbi는 ODIO. Vivamizzle boofron. orci Crizzle. CRAS는 interdizzle, 그 FO rizzle을 mauris, 우린 충무로의 amizzle, pizzle을 izzle 그것을 파괴. Pellentesque rizzle. 도박의 FO rizzle 마일, volutpat 음음 ... YIH! 엉덩이 펑키 신선한, shizzle 구경에게, 언제나 adipiscing. izzle ipsum의를 Crizzle. 우리는 정 mammasay mammasa 엄마 OO 사 물건 brizzle의 요거야. CRAS 엉덩이 그래서 우린 nizzle purizzle sodales을 분해. 그것을 밖으로 확인 venenatizzle의 그래서 우린 요는 shizzle을 종료합니다. NUNC의 crackalackin. 확인 placerizzle 와우 와우 나비 Suspendisse. 쉿 유럽 연합 (EU)의 사전 적. shizzle의 NUNC은, 유럽 연합 (EU)의 갱스터 hendrerizzle 레오, 갱스터 고양이 속 elementum pizzle, 지글 지글 aliquizzle 취해 비즐 luctus PEDE. 남 nisl. shizzle 다 폭탄 taciti 조폭 물건 구경에게 내가 inceptos의 rizzle FO 당 내가 conubia 당 shizzle 비즐의 당신이 아들 해요 shizzle에 있어요. 내려 휴식을 확인, neque izzle 쿨의 nonummy, tellivizzle orci viverra 레오, 비즐 언제나 risizzle arcu FO shizzle 마작 nizzle.
    서비스
    로렘 입숨 슬픔은 우리에게 거 충무로 미친 adipiscing 팻 앉아. Nullizzle sapizzle의 velizzle은 멀리 vizzle, arcu을 volutpizzle, suscipizzle quizzle까지 shizzle를 종료합니다. Pellentesque 내 shizz 확인합니다. SED erizzle. 나는 shizzle의 izzle 펑키 신선한에있어 dapibus turpis 템퍼 shizzlin 디즐. 내 shizz nibh izzle turpizzle Maurizzle. 갱스터 izzle FO shizzle 마작 nizzle FO rizzle, 마작 홈 g-디즐. 나는 shizzle eleifend rhoncizzle FO shizzle 내 nizzle에있어. rizzle에 미친 dictumst을 habitasse. 요 dapibus. Curabitizzle tellizzle의 urna, pretizzle 휴식을 아래로, mattis izzle, eleifend rizzle, NUNC. 내 shizz suscipit. 정수 신선한 지글 지글의 pizzle 펑키를 확인하십시오. 그 년대 shizzle 등 디즐 quis에 NiSi sheezy 몰리스. Suspendisse 비즐. Morbi는 ODIO. Vivamizzle boofron. orci Crizzle. CRAS는 interdizzle, 그 FO rizzle을 mauris, 우린 충무로의 amizzle, pizzle을 izzle 그것을 파괴. Pellentesque rizzle. 도박의 FO rizzle 마일, volutpat 음음 ... YIH! 엉덩이 펑키 신선한, shizzle 구경에게, 언제나 adipiscing. izzle ipsum의를 Crizzle. 우리는 정 mammasay mammasa 엄마 OO 사 물건 brizzle의 요거야. CRAS 엉덩이 그래서 우린 nizzle purizzle sodales을 분해. 그것을 밖으로 확인 venenatizzle의 그래서 우린 요는 shizzle을 종료합니다. NUNC의 crackalackin. 확인 placerizzle 와우 와우 나비 Suspendisse. 쉿 유럽 연합 (EU)의 사전 적. shizzle의 NUNC은, 유럽 연합 (EU)의 갱스터 hendrerizzle 레오, 갱스터 고양이 속 elementum pizzle, 지글 지글 aliquizzle 취해 비즐 luctus PEDE. 남 nisl. shizzle 다 폭탄 taciti 조폭 물건 구경에게 내가 inceptos의 rizzle FO 당 내가 conubia 당 shizzle 비즐의 당신이 아들 해요 shizzle에 있어요. 내려 휴식을 확인, neque izzle 쿨의 nonummy, tellivizzle orci viverra 레오, 비즐 언제나 risizzle arcu FO shizzle 마작 nizzle.
    연락처
    로렘 입숨 슬픔은 우리에게 거 충무로 미친 adipiscing 팻 앉아. Nullizzle sapizzle의 velizzle은 멀리 vizzle, arcu을 volutpizzle, suscipizzle quizzle까지 shizzle를 종료합니다. Pellentesque 내 shizz 확인합니다. SED erizzle. 나는 shizzle의 izzle 펑키 신선한에있어 dapibus turpis 템퍼 shizzlin 디즐. 내 shizz nibh izzle turpizzle Maurizzle. 갱스터 izzle FO shizzle 마작 nizzle FO rizzle, 마작 홈 g-디즐. 나는 shizzle eleifend rhoncizzle FO shizzle 내 nizzle에있어. rizzle에 미친 dictumst을 habitasse. 요 dapibus. Curabitizzle tellizzle의 urna, pretizzle 휴식을 아래로, mattis izzle, eleifend rizzle, NUNC. 내 shizz suscipit. 정수 신선한 지글 지글의 pizzle 펑키를 확인하십시오. 그 년대 shizzle 등 디즐 quis에 NiSi sheezy 몰리스. Suspendisse 비즐. Morbi는 ODIO. Vivamizzle boofron. orci Crizzle. CRAS는 interdizzle, 그 FO rizzle을 mauris, 우린 충무로의 amizzle, pizzle을 izzle 그것을 파괴. Pellentesque rizzle. 도박의 FO rizzle 마일, volutpat 음음 ... YIH! 엉덩이 펑키 신선한, shizzle 구경에게, 언제나 adipiscing. izzle ipsum의를 Crizzle. 우리는 정 mammasay mammasa 엄마 OO 사 물건 brizzle의 요거야. CRAS 엉덩이 그래서 우린 nizzle purizzle sodales을 분해. 그것을 밖으로 확인 venenatizzle의 그래서 우린 요는 shizzle을 종료합니다. NUNC의 crackalackin. 확인 placerizzle 와우 와우 나비 Suspendisse. 쉿 유럽 연합 (EU)의 사전 적. shizzle의 NUNC은, 유럽 연합 (EU)의 갱스터 hendrerizzle 레오, 갱스터 고양이 속 elementum pizzle, 지글 지글 aliquizzle 취해 비즐 luctus PEDE. 남 nisl. shizzle 다 폭탄 taciti 조폭 물건 구경에게 내가 inceptos의 rizzle FO 당 내가 conubia 당 shizzle 비즐의 당신이 아들 해요 shizzle에 있어요. 내려 휴식을 확인, neque izzle 쿨의 nonummy, tellivizzle orci viverra 레오, 비즐 언제나 risizzle arcu FO shizzle 마작 nizzle.

    깡깡이

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

  11. 11.나는 코드의 모든 라인을 설명 https://css-tricks.com/snippets/jquery/smooth-scrolling/에이 예 우연히. 나는 이것이 최선의 선택이 될 것을 알았다.

    나는 코드의 모든 라인을 설명 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);
      }
    }
  });

  12. 12.좋아 간단한 방법은 다음과 같습니다 -

    좋아 간단한 방법은 다음과 같습니다 -

    클릭 기능 (JQuery와) 내 -

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

    HTML

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

  13. 13.

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

    여기 테스트 :

    http://jsbin.com/ucati4

  14. 14.다음과 같은 솔루션은 나를 위해 일한 :

    다음과 같은 솔루션은 나를 위해 일한 :

    $("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);
        }
    );

    15. from https://stackoverflow.com/questions/8579643/how-to-scroll-up-or-down-the-page-to-an-anchor-using-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 읽기, 만들기 jQuery로 삭제 쿠키 [중복]  (0) 2020.10.09
[JQUERY] 어떻게 GET GET와 jQuery로 POST 변수에?  (0) 2020.10.09
[JQUERY] Ajax 요청의 내용 유형 및 데이터 형식은 무엇입니까?  (0) 2020.10.09
[JQUERY] jQuery를, 간단한 폴링 예  (0) 2020.10.09
[JQUERY] 어떻게 jQuery를 통해 제출하지 않고 HTML5 양식 유효성 검사를 강제로  (0) 2020.10.09
,

티스토리툴바