jQuery 스크롤을 Div로

jQuery 스크롤을 Div로

FAQ 페이지를 만들고 있으며 상단에 있는 버튼을 사용하여 범주로 이동합니다(범주로 이동합니다.p내가 카테고리 라벨로 사용하는 태그, ex.<p id="general">일반적인 경우).카테고리로 바로 이동하는 대신 스크롤 효과를 추가하고 싶습니다.저는 http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm 같은 것을 제 페이지에서 원하는 부분으로 스크롤하는 것을 원합니다.그 링크는 스크롤 효과가 좋은 페이지 상단으로 이동하는 스크립트입니다.제가 링크하는 곳으로 스크롤할 수 있는 비슷한 것이 필요합니다.예를 들어, 만약 내가 misc 카테고리로 가고 싶다면, 나는 그냥 할 수 있기를 원합니다.<a href="#misc">Miscellaneous</a>페이지의 해당 섹션으로 스크롤하도록 합니다.

본문과 html 개체를 함께 이동해야 하는 경우가 많습니다.

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

Shifty Thomas의 말이 옳습니다.

$("#divToBeScrolledTo").offset().top + 10 // +10 (pixels) reduces the margin.

마진을 늘리려면 다음을 사용합니다.

$("#divToBeScrolledTo").offset().top - 10 // -10 (pixels) would increase the margin between the top of your window and your element.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    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) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

데모를 보려면 다음 링크를 확인하십시오. http://css-tricks.com/snippets/jquery/smooth-scrolling/ 을 사용해 보았는데 꽤 잘 작동합니다.

이와 같은 방법으로 각 내부 링크의 클릭을 넘겨받아 해당 북마크 위치로 스크롤할 수 있습니다.

$(function(){
  $('a[href^=#]').click(function(e){
    var name = $(this).attr('href').substr(1);
    var pos = $('a[name='+name+']').offset();
    $('body').animate({ scrollTop: pos.top });
    e.preventDefault();
  });
});

JQuery position 함수를 사용하여 div의 좌표를 얻은 다음 javascript 스크롤을 사용할 수 있습니다.

var position = $("div").position();
scroll(0,position.top);

링크 요소가 다음과 같은 경우:

<a id="misc" href="#misc">Miscellaneous</a>

그리고 기타 범주는 다음과 같은 것으로 제한됩니다.

<p id="miscCategory" name="misc">....</p>

jQuery를 사용하여 원하는 효과를 수행할 수 있습니다.

<script type="text/javascript">
  $("#misc").click(function() {
    $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
  });
</script>

내 기억으로는..(하지만 테스트를 해본적은 없고 기억으로 쓴적은 없습니다)

아래 스크립트는 저에게 적합한 일반적인 솔루션입니다.이것과 다른 실에서 끌어낸 아이디어를 바탕으로 합니다.

"#"로 시작하는 href 속성의 링크를 클릭하면 페이지가 표시된 div까지 부드럽게 스크롤됩니다."#"만 있는 경우 페이지 상단으로 부드럽게 스크롤합니다.

$('a[href^=#]').click(function(){
    event.preventDefault();
    var target = $(this).attr('href');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});

예를 들어, 위의 코드가 있을 때 태그가 있는 링크를 클릭합니다.<a href="#">600 속도로 페이지 상단으로 스크롤합니다.태그가 있는 링크 클릭<a href="#mydiv">100 px 위까지 스크롤합니다.<div id="mydiv">600 속도로이 숫자들을 자유롭게 바꾸세요.

도움이 됐으면 좋겠네요!

저도 우연히 마주쳤어요.이를 사용한 예제 보기: https://github.com/flesler/jquery.scrollTo

다음과 같이 사용합니다.

$('#arrow_back').click(function () {
    $.scrollTo('#features_1', 1000, { easing: 'easeInOutExpo', offset: 0, 'axis': 'y' }); 
});

깨끗한 용액.나한테 효과가 있어요!

다음 URL에서 'href' 대신 'name'을 사용할 수도 있습니다.

    $('a[name^=#]').click(function(){
    var target = $(this).attr('name');
    if (target == '#')
      $('html, body').animate({scrollTop : 0}, 600);
    else
      $('html, body').animate({
        scrollTop: $(target).offset().top - 100
    }, 600);
});

언급URL : https://stackoverflow.com/questions/5284814/jquery-scroll-to-div