JavaScript/jQuery로 페이지 맨 위로 스크롤하는 방법은 무엇입니까?

JavaScript/jQuery로 페이지 맨 위로 스크롤하는 방법은 무엇입니까?

자바스크립트/jQuery로 브라우저 스크롤을 제어할 수 있는 방법이 있습니까?

페이지를 반쯤 아래로 스크롤한 다음 다시 로드를 트리거하면 페이지가 맨 위로 이동하고 대신 마지막 스크롤 위치를 찾습니다.그래서 저는 이렇게 했습니다.

$('document').ready(function() {
   $(window).scrollTop(0);
});

하지만 운이 없습니다.

편집:

그래서 페이지 로딩 후에 제가 전화를 걸었을 때 두 분의 답변 모두 효과가 있었습니다. 감사합니다...ready이벤트(본체를 로드() 기능에서도 테스트했습니다.

따라서 후속 조치는 브라우저가 이전 위치로 스크롤하는 것을 방지하거나 브라우저가 작업을 수행한 후 다시 맨 위로 스크롤하는 것을 방지하는 방법이 있습니까?

크로스 브라우저 순수 JavaScript 솔루션:

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

거의 다 됐어요. 설정해야 합니다.scrollTopbody,것은 아니다.window:

$(function() {
   $('body').scrollTop(0);
});

편집:

페이지 맨 위에 빈 앵커를 추가할 수 있습니다.

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});

와, 이 질문에 9년이나 늦었어요.여기 있습니다.

이 코드를 온로드에 추가합니다.

// This prevents the page from scrolling down to where it was previously.
if ('scrollRestoration' in history) {
    history.scrollRestoration = 'manual';
}
// This is needed if the user scrolls down during page load and you want to make sure the page is scrolled to the top once it's fully loaded. This has Cross-browser support.
window.scrollTo(0,0);

창 로드에서 실행하려면 이렇게 랩핑하면 됩니다(JQuery가 참조되었다고 가정).

$(function() {
  // put the code here
});

history.scrollRestore 브라우저 지원:

Chrome: 지원됨(46년 이후)

Firefox: 지원됨(46년 이후)

Edge: 지원됨(79년 이후)

IE: 지원되지 않음

Opera: 지원됨(33년 이후)

Safari: 지원됨

IE의 경우 자동으로 아래로 스크롤한 후 맨 위로 다시 스크롤하려면 다음과 같이 해야 합니다.

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
if(isIE11) {
    setTimeout(function(){ window.scrollTo(0, 0); }, 300);  // adjust time according to your page. The better solution would be to possibly tie into some event and trigger once the autoscrolling goes to the top.
} 

갱신하다

스크롤 효과로 페이지 맨 위로 이동하는 것이 Javascript에서 다음과 같이 조금 더 쉽습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

두 가지 사용 방법이 있습니다.scroll API.

이것이 제가 추천하는 방법입니다.옵션 개체 사용:

window.scroll(options)

은 옵은다정의수할있더다니옵나입션은로으므이음을을 할 수 있기 때문에 더 좋은 선택지입니다.behavior내장된 완화 애니메이션을 적용하는 소품.

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

다른 방법은 x와 y 좌표를 사용하는 것입니다.

window.scroll(x-coord, y-coord)

x-cord - 왼쪽 위에 표시할 문서의 수평 축을 따라 있는 픽셀입니다.

y-cord - 왼쪽 위에 표시할 문서의 수직 축을 따르는 픽셀입니다.

---

이전 답변 사용 안 함

이것은 우리의 바닐라입니다.javascript실행.상단 버튼을 클릭한 후 사용자가 충격을 받지 않도록 간단한 완화 효과가 있습니다.

그것은 매우 작고, 소형화되면 더욱 작아집니다.jquery 방법의 대안을 찾고 있지만 동일한 결과를 원하는 개발자들은 이것을 시도할 수 있습니다.

제이에스

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

건배!

브라우저가 이전 위치로 스크롤하는 것을 방지하거나, 브라우저가 작동한 후에 상단으로 다시 스크롤하는 방법이 있습니까?

다음 jquery 솔루션은 저에게 적합합니다.

$(window).unload(function() {
    $('body').scrollTop(0);
});

no-jQuery'ers를 위한 순수 자바스크립트 애니메이션 스크롤 버전입니다.

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

그리고 나서:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>

2021년의 최신 솔루션

document.body.scrollIntoView({behavior: "smooth"});

IE를 포함한 모든 브라우저에서 작동합니다(이전 브라우저는 부드러운 스크롤을 지원하지 않습니다).

이것은 나에게 도움이 됩니다.

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

짧은길사를 합니다.setTimeout에의 에.onload브라우저에서 스크롤할 수 있는 기회를 제공합니다.

jQuery와 함께 사용할 수 있습니다.

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});

다음 기능을 사용합니다.

window.scrollTo(xpos, ypos)

여기서 expos는 필수입니다.x축(수평)을 따라 픽셀 단위로 스크롤할 좌표

ypos도 필수입니다.Y축(수직)을 따라 픽셀 단위로 스크롤할 좌표

다음 코드는 Firefox, Chrome 및 Safari에서 작동하지만 Internet Explorer에서 테스트할 수 없습니다.누가 테스트한 후에 제 답변을 편집하거나 의견을 제시할 수 있습니까?

$(document).scrollTop(0);

$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

사용 방법

순수한 (애니메이션된) Javascript 솔루션:

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

설명:

window.scrollY는 창이 스크롤된 위쪽의 픽셀 수를 브라우저에서 유지 관리하는 변수입니다.

window.scrollTo(x,y)는 x축과 y축에서 특정 양의 픽셀을 창에 스크롤하는 기능입니다.

따라서,window.scrollTo(0,window.scrollY-20)페이지를 위쪽으로 20픽셀 이동합니다.

그setTimeout함수를 10밀리초 안에 다시 호출하여 20픽셀(픽셀)을 더 이동할 수 있습니다.if여전히 스크롤이 필요한지 확인합니다.

HTML 파일의 맨 처음 부분에 참조 요소를 사용하는 것이 어떻습니까?

<div id="top"></div>

그런 다음 페이지가 로드되면 간단히 수행합니다.

$(document).ready(function(){

    top.location.href = '#top';

});

이 기능이 실행된 후에 브라우저가 스크롤되면 다음을 수행합니다.

$(window).load(function(){

    top.location.href = '#top';

});

크로스 브라우저에서 맨 위로 스크롤:

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        } 

ID가 = div_id인 요소로 크로스 브라우저 스크롤:

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        } 

만약 당신이 괴짜 모드에 있다면 (고맙다 @Niet the Dark Absol):

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

엄격한 모드인 경우:

document.documentElement.scrollTop = 0;

여기서는 jQuery가 필요 없습니다.

제 경우 몸이 작동하지 않았습니다.

$('body').scrollTop(0);

그러나 HTML은 작동했습니다.

$('html').scrollTop(0);

질문에 , 은 편된질에답다등수있다니를 할 수 .onscroll so 런그급:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

이렇게 하면 첫 번째 스크롤 시도(브라우저에서 자동으로 수행되는 스크롤)가 효과적으로 취소됩니다.

효과가 있습니다.

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});

이 두 가지의 조합이 저에게 도움이 되었습니다.스크롤되지 않는 사이드네이브가 있어서 다른 답변은 도움이 되지 않았습니다.

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

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

}, 15);

var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>

애니메이션 없이, 그냥.scroll(0, 0)(vanilla JS)

사이드나브와 함께 각지고 재료적인 디자인을 사용하는 사람이 있다면요.페이지 맨 위로 이동합니다.

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });

다른 곳에 게시된 이 글을 본 기억이 있지만(어디서 찾을 수 없음), 이 글은 정말 잘 작동합니다.

setTimeout(() => {
    window.scrollTo(0, 0);
}, 0);

이상하지만 작동 방식은 JavaScript의 스택 대기열이 작동하는 방식을 기반으로 합니다.전체 설명은 지연 제로 섹션에서 확인할 수 있습니다.

기본적인 생각은 시간이setTimeout에서는 실제로 대기할 설정된 시간을 지정하지 않지만 대기할 최소 시간을 지정합니다.따라서 0ms를 기다리라고 하면 브라우저는 마지막으로 갔던 곳으로 창을 스크롤하는 것과 같은 다른 모든 대기 중인 프로세스를 실행한 다음 콜백을 실행합니다.

에서 해시가 작업을 수행해야 합니다.머리글이 있는 경우 다음을 사용할 수 있습니다.

window.location.href = "#headerid";

그렇지 않으면 #만 작동합니다.

window.location.href = "#";

그리고 URL에 기록되는 대로 새로 고치면 그대로 유지됩니다.

사실, 당신은 클릭 이벤트에서 그것을 하고 싶다면, 당신은 당신의 요소 주위에 링크를 놓고 그것을 #ashref로 제공하기 위해 자바스크립트가 필요하지 않습니다.

먼저 이동할 위치에 빈 앵커 태그를 추가합니다.

<a href="#topAnchor"></a> 

이제 헤더 섹션에 함수를 추가합니다.

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

마지막으로 온로드 이벤트를 본문 태그에 추가합니다.

<body onload="GoToTop()">

모든 X 및 Y 값에 대해 작동하며 scrollDuration만 추가하면 window.scrollToapi와 동일한 일반 버전입니다.

*window.scrollTo 브라우저 api와 일치하는 일반 버전**

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}

 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>

언급URL : https://stackoverflow.com/questions/4210798/how-to-scroll-to-top-of-page-with-javascript-jquery