JavaScript를 사용하여 페이지 상단으로 스크롤 하시겠습니까?

JavaScript를 사용하여 페이지 상단으로 스크롤하려면 어떻게합니까? 스크롤바가 즉시 상단으로 이동하더라도 바람직합니다. 부드러운 스크롤을 찾고 있지 않습니다.

애니메이션을 적용하기 위해 변경이 필요하지 않은 경우 특별한 플러그인을 사용할 필요가 없습니다. 네이티브 JavaScript window.scrollTo 메서드 만 사용하면됩니다. 0,0을 전달하면 페이지가 왼쪽 상단으로 즉시 스크롤됩니다. .

window.scrollTo(x-coord, y-coord);

매개 변수

• x 좌표는 가로 축을 따른 픽셀입니다.
• y 좌표는 세로 축을 따른 픽셀입니다.

부드러운 스크롤을 원하면 다음과 같이 해보십시오.

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

그 <a>태그를 가지고 href="#top"상단으로 부드럽게 스크롤합니다.

이것을 스크롤하여 위로 스크롤하십시오.

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

부드러운 애니메이션으로 더 나은 솔루션 :

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

참조 : https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

이를 위해 jQuery가 필요하지 않습니다. 표준 HTML 태그로 충분합니다 ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

이러한 모든 제안은 다양한 상황에 적합합니다. 검색을 통해이 페이지를 찾을 사람들을 위해, 하나는 줄 수있는 이 시도. 플러그인이없는 JQuery는 요소로 스크롤합니다.

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

부드러운 스크롤, 순수한 자바 스크립트 :

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

편집하다:

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

상단 및 왼쪽 여백이있는 또 다른 방법은 다음과 같습니다.

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

html로

<a href="#top">go top</a>

정말 이상합니다.이 질문은 5 년 동안 활성화되어 있으며 스크롤링 애니메이션에 대한 바닐라 JavaScript 답변은 아직 없습니다…

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

원하는 경우 이것을 함수로 감싸서 onclick속성 을 통해 호출 할 수 있습니다 . 이 jsfiddle을 확인하십시오

참고 : 이것은 매우 기본적인 솔루션이며 아마도 가장 성능이 좋은 솔루션이 아닐 수도 있습니다. https://github.com/cferdinandi/smooth-scroll 에서 매우 정교한 예를 찾을 수 있습니다.

부드러운 스크롤을 원하면 다음을 시도하십시오.

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

또 다른 솔루션은 JavaScript window.scrollTo 메서드입니다.

 window.scrollTo(x-value, y-value);

매개 변수 :

• x- 값은 가로 축을 따른 픽셀입니다.
• y- 값은 세로 축을 따른 픽셀입니다.

with with window.scrollTo(0, 0);매우 빠르
므로 Mark Ursino 예제를 사용해 보았지만 Chrome에서는 아무 일도 일어나지
않으며 이것을 찾았습니다.

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

클라이언트가 "지금 예약"버튼을 클릭하고 대여 기간을 선택하지 않았을 때 3 개의 브라우저를 모두 테스트했으며 작동합니다.
CSS를 사용
하고 있습니다. 2 초, 3 초 후에 사라짐

많은 의 사용자 과 같이, 크로스 브라우저 호환성을 위해 모두 HTML과 몸 태그를 선택하는 것이 좋습니다 :

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

콜백을 한 번만 실행하면 믿을 수 있습니다. 두 가지 요소를 선택했기 때문에 실제로 두 번 실행됩니다.

그것이 당신에게 문제가된다면, 당신은 다음과 같이 할 수 있습니다 :

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

이것이 작동하는 이유는 Chrome $('html').scrollTop()에서 0을 반환하지만 Firefox와 같은 다른 브라우저에서는 그렇지 않습니다.

스크롤 막대가 이미 맨 위에있는 경우 애니메이션이 완료 될 때까지 기다리지 않으려면 다음을 시도하십시오.

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

오래된 #top트릭을 할 수 있습니다

document.location.href = "#top";

FF, IE 및 Chrome에서 잘 작동합니다

이 시도

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); 작동합니다.

비 jQuery 솔루션 / 순수 JavaScript :

document.body.scrollTop = document.documentElement.scrollTop = 0;

이것은 작동합니다 :

window.scrollTo(0, 0);

이 코드를 사용해보십시오 :

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

div => Dom Element 스크롤하려는 위치.

시간 => 밀리 초, 스크롤 속도를 정의하십시오.

왜 JQuery 내장 함수 scrollTop을 사용하지 않습니까?

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

짧고 간단합니다!

JQuery가 필요하지 않습니다. 간단히 당신은 스크립트를 호출 할 수 있습니다

window.location = '#'

"맨 위로 이동"버튼을 클릭하면

샘플 데모 :

output.jsbin.com/fakumo#

추신 : angularjs와 같은 최신 라이브러리를 사용하는 경우이 방법을 사용하지 마십시오. URL hashbang이 손상되었을 수 있습니다.

이 스크립트를 사용하면 맨 위로 직접 스크롤 할 수 있습니다.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

순수한 JavaScript 솔루션 :

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Codepen 에서 애니메이션 솔루션을 작성합니다

또한 CSS scroll-behavior: smooth속성을 사용 하여 다른 솔루션을 시도 할 수 있습니다 .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

부드러운 스크롤을 원하지 않으면 부드러운 스크롤 애니메이션을 시작하자마자 속임수와 중지 할 수 있습니다.

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

권장 / 허용 여부는 모르겠지만 작동합니다. :)

언제 사용하겠습니까? 확실하지 않지만 어쩌면 한 번의 클릭으로 Jquery로 한 가지를 애니메이션으로 만들고 싶지만 애니메이션없이 다른 것을합니까? 즉, 페이지 상단에서 슬라이드 인 관리자 로그인 패널을 열고 즉시 상단으로 이동하여 확인하십시오.

자극

이 간단한 솔루션은 기본적으로 작동하며 모든 위치로 부드러운 스크롤을 구현합니다.

#내 의견으로는 섹션에 링크하고 싶을 때 유용하지만 앵커를 사용 하지 않는 것이 좋습니다. 그러나 어떤 상황에서는 특히 위를 가리킬 때 두 개의 다른 URL이 동일한 위치 ( http://www.example.org 및 http://www.example.org/# )

해결책

넣어 ID를 사용하면 예를 들어, 귀하의 첫 번째 스크롤하려는 태그 섹션 이 질문에 대한 대답,하지만 ID는 페이지 곳곳에 배치 될 수있다.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

그런 다음 버튼으로 링크를 사용할 수 있으며 이와 같은 코드로 onclick 속성을 편집하십시오 .

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

여기서 인수는 클릭 후 스크롤하려는 태그 document.getElementById의 ID 입니다.

링크에서 #someid와 같은 대상을 사용할 수 있습니다. 여기서 #someid는 div의 ID입니다.

또는 더 우아한 스크롤 플러그인을 사용할 수 있습니다.

http://plugins.jquery.com/project/ScrollTo 가 예입니다.

이 Fiddle http://jsfiddle.net/5bNmH/1/ 에서와 같이 JS를 사용해보십시오.

페이지 바닥 글에 "맨 위로 이동"버튼을 추가하십시오.

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

위의 답변 중 어느 것도 SharePoint 2016에서 작동하지 않습니다.

다음과 같이 수행해야합니다 : /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;