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

질문자 :KingNestor

JavaScript를 사용하여 페이지 맨 위로 스크롤하려면 어떻게 합니까? 스크롤 막대가 페이지 상단으로 즉시 점프하는 것은 부드러운 스크롤을 원하지 않기 때문에 바람직합니다.

애니메이션에 변경 사항이 필요하지 않은 경우 특별한 플러그인을 사용할 필요가 없습니다. 네이티브 JavaScript window.scrollTo() 메서드를 0, 0 전달하면 페이지가 맨 위로 스크롤됩니다. 즉시 떠났다.

 window.scrollTo(xCoord, yCoord);

매개변수

• xCoord는 가로축의 픽셀입니다.
• yCoord는 세로 축을 따라 있는 픽셀입니다.

SavoryBytes

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

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

이렇게 하면 href="#top" 인 <a> 태그를 사용하여 맨 위로 부드럽게 스크롤할 수 있습니다.

Mark Ursino

위로 스크롤하려면 이것을 시도하십시오.

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

mehmood

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

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

Ganesh Ghalame

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

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

Mathew

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

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

D.Alexander

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

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

wake-up-neo

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

Kamlesh

정말 이상합니다. 이 질문은 현재 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 에서 찾을 수 있습니다.

AvL

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

HTML에서

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

hasancse016

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

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

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

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

매개변수:

• x 값은 수평 축을 따라 있는 픽셀입니다.
• y 값은 세로 축을 따라 있는 픽셀입니다.

Gaurang Sondagar

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개의 필드를 가리키는 대화 상자 div를 열고 3초 후에 사라집니다.

Luiggi ZAMOL

많은 의 사용자 과 같이, 크로스 브라우저 호환성을 위해 모두 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(); }

Big McLargeHuge

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

 document.location.href = "#top";

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

pollirrata

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

 .section{ height:400px; } .section1{ background-color: #333; } .section2{ background-color: red; } .section3{ background-color: yellow; } .section4{ background-color: green; } .scrolltop{ position:fixed; right:10px; bottom:10px; color:#fff; }

 <html> <head> <title>Scroll top demo</title> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> </head> <body> <div class="content-wrapper"> <div class="section section1"></div> <div class="section section2"></div> <div class="section section3"></div> <div class="section section4"></div> <a class="scrolltop">Scroll top</a> </div> </body> </html>

arvinda kumar

비 jQuery 솔루션/순수 JavaScript:

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

tfont

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

Hari Ganesan

이것은 작동합니다:

window.scrollTo(0, 0);

Santosh Jadi

이 시도

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

Renjith

TypeScript 의 해당 솔루션은 다음과 같을 수 있습니다.

 window.scroll({ top: 0, left: 0, behavior: 'smooth' });

Smaillns

다음 코드를 시도해 보세요.

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

div => 스크롤을 이동하려는 Dom 요소.

시간 => 밀리초, 스크롤 속도를 정의합니다.

Wasif Ali

순수한 JavaScript 솔루션:

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

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

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

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

Saeed Hassanvand

JQuery 내장 함수 scrollTop을 사용하지 않는 이유는 무엇입니까?

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

짧고 간단하게!

Sandeep Gantait

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

 window.location = '#'

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

샘플 데모:

output.jsbin.com/fakumo#

추신: angularjs와 같은 최신 라이브러리를 사용할 때는 이 접근 방식을 사용하지 마십시오. 그것은 URL 해시뱅을 깨뜨릴 수 있습니다.

Sriram

바로 위로 스크롤하려면 이 스크립트를 사용하기만 하면 됩니다.

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

Gayashan Perera

동기 부여

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

내 의견으로는 섹션에 연결하려는 경우 유용하지만 일부 상황에서는 특히 편안하지 않은 # 있는 링크) 사용을 피합니다. 동일한 위치( 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입니다.

Gianluca Casati

jQuery 없이 Pure Javascript로 부드러운 스크롤링

 // Get the btn let topBtn = document.querySelector('.top-btn') // On Click, Scroll to the page's top topBtn.onclick = () => window.scrollTo({ top: 0, behavior: 'smooth'}) // Remove behavior: 'smooth' if you don't want smooth scrolling // On scroll, Show/Hide the btn window.onscroll = () => window.scrollY > 500 ? topBtn.style.display = 'block' : topBtn.style.display = 'none'

 body { background-color: #111; height:5000px; } .top-btn { all:unset; position: fixed; right: 20px; bottom: 20px; cursor: pointer; font: bold 2rem monospace; color:white; display: none; }

 <button class="top-btn"></button>

Ahmad Moghazi

부드러운 스크롤을 원하지 않으면 부드러운 스크롤 애니메이션을 시작하자마자 속임수를 사용하여 중지할 수 있습니다... 다음과 같이:

 $(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로 한 가지를 애니메이션하고 싶지만 애니메이션 없이 다른 일을 하고 싶을 때? 즉, 페이지 상단에서 슬라이드인 관리자 로그인 패널을 열고 즉시 상단으로 이동하여 확인합니다.

Jon Story

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

또는 이것을 더 우아하게 만드는 스크롤 플러그인을 얼마든지 사용할 수 있습니다.

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

ScottE

javascript의 내장 함수 scrollTo 사용할 수 있습니다.

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

 <button onclick="scroll">Scroll</button>

Justin Liu

출처 : http:www.stackoverflow.com/questions/1144805/scroll-to-the-top-of-the-page-using-javascript