div id jQuery로 부드럽게 스크롤

div id jquery 코드로 스크롤하여 올바르게 작동하려고했습니다. 다른 스택 오버플로 질문에 따라 다음을 시도했습니다.

데모 http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

그러나 작동하지 않았습니다. 그것은 단지 div에 스냅합니다. 나는 또한 시도했다

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

진행하지 않고.

당신은 애니메이션을해야합니다 html, body

데모 http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

부드러운 스크롤을 위해 HTML 마크 업을 변경하지 않고 페이지에서 표준 href-id 탐색 을 재정의 하려면 다음을 사용하십시오 ( 예 ).

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

여기 내 2 센트가 있습니다 :

자바 스크립트 :

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

HTML :

<a class="scroll" target="contact">Contact</a>

그리고 목표 :

<h2 id="contact">Contact</h2>

내가 사용하는 것은 다음과 같습니다.

<!-- jquery smooth scroll to id's -->   
<script>
$(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
        }, 500);
        return false;
      }
    }
  });
});
</script>

이것의 장점은 각각 새로운 스크립트를 실행할 필요없이 무제한의 해시 링크와 해당 ID를 사용할 수 있다는 것입니다.

WordPress를 사용하는 경우 테마 footer.php파일 앞에 코드를 닫기 본문 태그 바로 앞에 삽입하십시오 </body>.

테마 파일에 액세스 할 수없는 경우 게시물 / 페이지 편집기 (텍스트 모드에서 게시물을 편집해야 함) 또는 모든 페이지에로드되는 텍스트 위젯에 코드를 포함 할 수 있습니다.

다른 CMS를 사용하거나 HTML 만 사용하는 경우 닫는 body 태그 바로 앞에 모든 페이지에로드되는 섹션에 코드를 삽입 할 수 있습니다 </body>.

이것에 대한 자세한 내용이 필요하면 빠른 게시물을 확인하십시오 : jQuery smooth scroll to id

도움이 되길 바랍니다. 궁금한 점이 있으면 알려주세요.

한 가지 예 더 :

HTML 링크 :

<a href="#featured" class="scrollTo">Learn More</a>

JS :

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML 앵커 :

  <div id="featured">My content here</div>

jQuery scrollTo 플러그인 파일을로드 하시겠습니까?

콘솔에서 "scrollTo"오류를 찾을 수없는 개체가 있습니다.

scrollTO 메소드는 기본 jquery 메소드가 아닙니다. 그것을 사용하려면 jquery scroll To 플러그인 파일을 포함시켜야합니다.

심판 : http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln : 이것을 head 섹션에 추가하십시오.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

이 스크립트는 Vector의 스크립트를 개선 한 것입니다. 나는 그것에 약간 변경했습니다. 따라서이 스크립트는 클래스 페이지 스크롤이있는 모든 링크에서 작동합니다.

처음에는 쉬지 않고 :

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

완화를 위해 Jquery UI가 필요합니다.

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

이것을 스크립트에 추가하십시오 :

'easeOutExpo'

결정적인

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

당신이 찾을 수있는 모든 여유 : 치트 시트 .

이 코드는 웹의 모든 내부 링크에 유용합니다

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

이것은 일반 JS에서 수행 할 수 있습니다.

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

브라우저 지원은 약간의 문제이지만 최신 브라우저는 지원합니다 .

다음과 같은 간단한 jQuery 코드를 사용하면됩니다.

튜토리얼, 데모 및 소스 코드는 여기에서 찾을 수 있습니다 -jQuery를 사용하여 div로 부드럽게 스크롤

자바 스크립트 :

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML :

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

여기서 나는 이것을 시도했다.

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

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML :

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

이것은 simplest.Source-입니다 https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

이것은 나에게 효과적입니다.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

감사.

고정 된 헤더가있어 그 아래로 스크롤되지 않는 경우 jQuery를 사용하여 div / anchor로 부드럽게 스크롤하는 솔루션이 있습니다. 다른 페이지에서 링크하면 작동합니다.

".site-header"를 헤더가 포함 된 div로 바꾸십시오.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});