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

JavaScript / jQuery로 브라우저 스크롤을 제어하는 ​​방법이 있습니까?

페이지를 반쯤 스크롤 한 다음 다시로드를 트리거하면 페이지가 맨 위로 이동하고 대신 마지막 스크롤 위치를 찾으려고합니다. 그래서 나는 이것을했다 :

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

그러나 운이 없다.

편집 :

따라서 페이지가로드 된 후 전화를 걸면 두 가지 답변이 모두 작동했습니다. 감사합니다. 그러나 페이지에서 새로 고침을하면 브라우저가 .ready이벤트 후에 계산하고 이전 스크롤 위치로 스크롤하는 것처럼 보입니다 (본문 onload () 함수도 테스트했습니다).

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

와우, 나는이 질문에 9 년 늦었다. 여기 있습니다 :

이 코드를 onload에 추가하십시오.

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

history.scrollRestoration 브라우저 지원 :

크롬 : 지원 (46부터)

Firefox : 지원 (46부터)

IE / Edge : 지원되지 않음 (아직)

오페라 : 지원 (33부터)

사파리 : 지원

IE / Edge의 경우 자동 스크롤 후 맨 위로 다시 스크롤하려는 경우 자동 스크롤 다운 된 다음 나에게 도움이되었습니다.

var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
var isEdge = /Edge/.test(navigator.userAgent);
if(isIE11 || isEdge) {
    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 솔루션 :

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

당신은 거의 그것을 가지고 - 당신은 설정할 필요 scrollTop에 body하지 window:

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

편집하다:

어쩌면 페이지 상단에 빈 앵커를 추가 할 수 있습니다.

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

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

다음 jquery 솔루션이 나를 위해 작동합니다.

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

jQuery를 사용하지 않는 사람들을위한 순수 JavaScript 애니메이션 스크롤 버전이 있습니다.

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>

최신 정보

자바 스크립트에서 스크롤 효과를 사용하여 페이지 맨 위로 이동하는 것이 이제 더 쉽습니다.

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

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

주의

우리는 최근 프로젝트에서 이것을 사용했지만 지금은 답변을 업데이트하는 동안 모질라 문서를 확인했으며 업데이트 된 것으로 생각합니다. 지금 방법입니다 window.scroll(x-coord, y-coord)및 언급하거나 사용 예를 표시하지 않습니다 object당신이 설정할 수 있습니다 매개 변수 behavior에를 smooth. 방금 코드를 시도했지만 여전히 크롬과 파이어 폭스에서 작동하며 객체 매개 변수는 여전히 사양에 있습니다.

주의해서 사용 하거나이 Polyfill을 사용할 수 있습니다 . 이외에도 위로 스크롤링이 polyfill 또한 다른 방법을 처리 window.scrollBy, element.scrollIntoView등

오래된 답변

이것이 바닐라 javascript구현입니다. To Top 버튼을 클릭 한 후에도 사용자가 충격을받지 않도록 간단한 여유 효과가 있습니다.

아주 작고 축소하면 더 작아집니다. jquery 메소드의 대안을 찾고 있지만 동일한 결과를 원하는 개발자는 이것을 시도 할 수 있습니다.

JS

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>

건배!

이것은 나를 위해 작동합니다 :

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)

여기서 xpos가 필요합니다. x 축 (가로)을 따라 스크롤 할 좌표 (픽셀 단위)

ypos도 필요합니다. y 축 (세로)을 따라 스크롤 할 좌표 (픽셀)

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

이것을 사용하십시오

다음 코드는 Firefox, Chrome 및 Safari 에서 작동 하지만 Internet Explorer에서 테스트 할 수 없습니다. 누군가 테스트하고 내 답변이나 댓글을 편집 할 수 있습니까?

$(document).scrollTop(0);

내 순수한 (애니메이션) 자바 스크립트 솔루션 :

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

편집 한 질문에 대답하기 위해 다음 onscroll과 같이 핸들러를 등록 할 수 있습니다 .

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

이렇게하면 첫 번째 스크롤 시도 (브라우저가 자동으로 수행 할 가능성이 있음)가 효과적으로 취소됩니다.

쿼크 모드 인 경우 (@Niet the Dark Absol 덕분에) :

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

엄격 모드 인 경우 :

document.documentElement.scrollTop = 0;

여기에 jQuery가 필요하지 않습니다.

이것은 작동합니다 :

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

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

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

그러나 HTML은 효과가있었습니다.

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

이 두 가지의 조합이 도움이되었습니다. 스크롤하지 않는 사이드 네비게이션이 있었기 때문에 다른 답변 중 어느 것도 도움이되지 않았습니다.

 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)(바닐라 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;
    });

해시는 작업을 수행해야합니다. 헤더가 있으면 사용할 수 있습니다

window.location.href = "#headerid";

그렇지 않으면 # 혼자 작동합니다

window.location.href = "#";

그리고 URL에 쓰여질 때 새로 고침하면 그대로 유지됩니다.

사실, onclick 이벤트에서 JavaScript를 수행하려면 JavaScript가 필요하지 않습니다. 요소 주위에 링크를 넣고 #을 href로 지정하면됩니다.

먼저 빈 앵커 태그를 가고 싶은 곳에 추가하십시오

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

이제 헤더 섹션에 함수를 추가하십시오.

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

마지막으로 body 태그에 onload 이벤트를 추가하십시오.

<body onload="GoToTop()">

모든 X 및 Y 값에서 작동하며 scrollDuration을 추가 한 window.scrollTo api와 동일한 일반 버전입니다.

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

나는 이것이 다른 곳에 게시 된 것을 보았지만 (어디를 찾을 수 없었는지), 이것은 실제로 잘 작동합니다.

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

이상하지만 작동 방식은 JavaScript의 스택 대기열 작동 방식을 기반으로합니다. 전체 설명은 발견 여기에 제로 딜레이 섹션에.

기본 아이디어는 시간 setTimeout이 실제로 대기 할 설정된 시간을 지정하지 않고 대기 할 최소 시간을 지정한다는 것입니다. 따라서 0ms를 기다리라고 지시하면 브라우저는 대기중인 다른 모든 프로세스 (예 : 마지막으로 창 스크롤)를 실행 한 다음 콜백을 실행합니다.

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