jQuery Div로 스크롤

jQuery Div로 스크롤

---

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

---

$(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/ 데모를 위해 이전에 사용해 보았고 꽤 잘 작동합니다.

---

되어 종종 모두 몸을 이동하는 데 필요한 및 HTML 함께 객체.

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

ShiftyThomas가 맞습니다 :

$("#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^=#]').click(function(e){
    var name = $(this).attr('href').substr(1);
    var pos = $('a[name='+name+']').offset();
    $('body').animate({ scrollTop: pos.top });
    e.preventDefault();
  });
});

---

JQuery 위치 함수를 사용하여 div의 좌표를 얻은 다음 자바 스크립트 스크롤을 사용할 수 있습니다.

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 속도로 페이지 상단으로 스크롤됩니다. 태그가있는 링크를 클릭하면 600 속도 <a href="#mydiv">로 100px 위로 스크롤됩니다 <div id="mydiv">.이 숫자를 자유롭게 변경하십시오.

도움이 되었기를 바랍니다.

---

나는 똑같이 만났다. 이것을 사용하여 예제를 보았습니다 : 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