복붙노트

[JQUERY] DIV ID로 스크롤 부드러운 jQuery를

JQUERY

DIV ID로 스크롤 부드러운 jQuery를

해결법

  1. 1.당신은 HTML을 애니메이션 할 필요가 몸

    당신은 HTML을 애니메이션 할 필요가 몸

    DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

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

  2. 2.당신이 부드러운 스크롤을위한 HTML 마크 업을 변경하지 않고 페이지의 표준 HREF-ID 탐색을 무시하려면이 (예)를 사용합니다 :

    당신이 부드러운 스크롤을위한 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});
});

  3. 3.여기 내 2 센트 :

    여기 내 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>

  4. 4.여기에 내가 무엇을 사용 :

    여기에 내가 무엇을 사용 :

    <!-- 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의 수를 무제한으로 사용할 수있다.

    당신이 닫는 body 태그 전에 테마의 footer.php 파일 오른쪽의 코드 삽입, 워드 프레스를 사용하는 경우.

    당신이 테마 파일에 액세스 할 수없는 경우, 당신은 포스트 / 페이지 편집기 내부의 코드 권리를 포함 할 수 있습니다 (당신은 텍스트 모드에서 게시물을 편집하고 있어야합니다) 또는 모든 페이지에로드하는 텍스트 위젯.

    당신이 다른 어떤 CMS하거나 HTML을 사용하는 경우, 당신이 섹션에있는 코드를 삽입 할 수있는 모든 페이지에 부하까지 바로 닫는 body 태그 전에.

    이에 대한 자세한 내용을 보려면 여기를 내 빠른 게시물을 체크 아웃 : jQuery를이 ID로 스크롤을 부드럽게

    하는 데 도움이, 그리고 당신이 그것에 대해 질문이 있으면 알려 주시기 바랍니다.

  5. 5.하나 개의 예를 더 :

    하나 개의 예를 더 :

    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>

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

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

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

    브라우저 지원은 약간의 문제이지만, 현대적인 브라우저를 지원합니다.

  7. 7.이 코드는 웹에 내부 링크에 대한 도움이 될 것입니다

    이 코드는 웹에 내부 링크에 대한 도움이 될 것입니다

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

  8. 8.당신은 확실히 당신은 jQuery를 scrollTo 플러그인 파일을로드하는거야?

    당신은 확실히 당신은 jQuery를 scrollTo 플러그인 파일을로드하는거야?

    당신은 객체를 받고있을 수 있습니다 방법은 없습니다 콘솔에서 "scrollTo"오류를 발견했습니다.

    scrollTO 방법은 네이티브 JQuery와 방법이 아닙니다. 그것을 사용하는 당신은 JQuery와 스크롤 플러그인 파일을 포함해야합니다.

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

    SOLN : 헤드 섹션이 추가.

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

  9. 9.이 스크립트는 벡터에서 스크립트의 개선이다. 나는에 약간의 변화를 만들었습니다. 그래서이 스크립트는의 클래스 페이지 스크롤 모든 링크에 적용됩니다.

    이 스크립트는 벡터에서 스크립트의 개선이다. 나는에 약간의 변화를 만들었습니다. 그래서이 스크립트는의 클래스 페이지 스크롤 모든 링크에 적용됩니다.

    완화없이 먼저 :

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

    당신이 여기에서 찾을 수있는 모든 이징 : 치트 시트.

  10. 10.당신은 다음과 같은 간단한 jQuery 코드를 사용하여 작업을 수행 할 수 있습니다.

    당신은 다음과 같은 간단한 jQuery 코드를 사용하여 작업을 수행 할 수 있습니다.

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

    자바 스크립트 :

    $(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>

  11. 11.여기에 나를 위해, 그 작업 위대한이 시도.

    여기에 나를 위해, 그 작업 위대한이 시도.

    $('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>

  12. 12.다음 경우에 jQuery를 사용하여 스크롤로 사업부 / 앵커를 부드럽게 내 솔루션은 그래서 그 아래 스크롤되지 않는 고정 된 헤더가 있습니다. 또한 그것은 다른 페이지에서 링크 작동합니다.

    다음 경우에 jQuery를 사용하여 스크롤로 사업부 / 앵커를 부드럽게 내 솔루션은 그래서 그 아래 스크롤되지 않는 고정 된 헤더가 있습니다. 또한 그것은 다른 페이지에서 링크 작동합니다.

    그냥 헤더를 포함 사업부에 ".site 헤더"를 대체합니다.

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

  13. 13.//www.w3schools.com/jsref/met_element_scrollintoview.asp :이 simplest.Source-HTTPS입니다

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

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

  14. 14.이것은 나에게 작동합니다.

    이것은 나에게 작동합니다.

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

    감사.

    15. from https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 자바 스크립트에서 창 크기 조정 이벤트를 트리거하기 위해?  (0) 2020.10.20
[JQUERY] 뷰포트의 HTML5 캔버스 100 % 너비 높이?  (0) 2020.10.20
[JQUERY] 조건과 일치하는, 어레이 내부의 객체의 인덱스를 얻기  (0) 2020.10.20
[JQUERY] jQuery를 removeClass 와일드 카드  (0) 2020.10.20
[JQUERY] 어떻게 jQuery를 사용하여 iframe이 상위 페이지에 액세스?  (0) 2020.10.20
,

티스토리툴바