JavaScript / jQuery ile sayfanın üstüne nasıl geçilir?

JavaScript / jQuery ile tarayıcı kaydırmayı kontrol etmenin bir yolu var mı?

Sayfamı yarıya kadar kaydırdığımda, daha sonra bir yeniden yüklemeyi tetiklediğimde, sayfanın en üste gitmesini istiyorum, ancak bunun yerine son kaydırma konumunu bulmaya çalışıyor. Ben de bunu yaptım:

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

Ama şans yok.

DÜZENLE :

Sayfa yüklendikten sonra aradığımda her iki cevabınız da işe yaradı-Teşekkürler. Ancak, sayfada sadece bir yenileme yaparsam, tarayıcı .readyolayı hesapladıktan sonra eski kaydırma konumunu hesaplar ve kaydırır gibi görünür (gövde yükü () işlevini de test ettim).

Yani takip, tarayıcıyı geçmiş konumuna kaydırmayı ÖNLEMEK veya işini yaptıktan SONRA tekrar yukarı kaydırmanın bir yolu var mı?

Vay be, bu soruya 9 yıl geç kaldım. Hadi bakalım:

Bu kodu yüklemenize ekleyin.

// 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 Tarayıcı desteği:

Chrome: desteklenir (46'dan beri)

Firefox: destekleniyor (46'dan beri)

IE / Edge: desteklenmiyor (Henüz ..)

Opera: desteklendi (33'ten beri)

Safari: desteklenir

IE / Edge için, otomatik aşağı kaydırıldıktan SONRA tekrar yukarı kaydırmak istiyorsanız, bu benim için çalıştı:

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

Çapraz tarayıcı, saf JavaScript çözümü:

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

Sen neredeyse aldım - ayarlamak gerekir scrollTopüzerinde bodydeğil, window:

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

DÜZENLE:

Belki sayfanın üstüne boş bir çapa ekleyebilirsiniz:

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

Tarayıcının geçmiş konumuna kaydırmasını ÖNLEMEK veya işini yaptıktan SONRA tekrar yukarı kaydırmanın bir yolu var mı?

Aşağıdaki jquery çözümü benim için çalışıyor:

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

İşte no-jQuery'ers için saf bir JavaScript animasyonlu kaydırma sürümü: D

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

Ve sonra:

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

GÜNCELLEME

Bir kaydırma efekti ile sayfanın üstüne gitmek javascript ile şimdi biraz daha kolay:

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

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

DİKKAT

Bunu daha yeni projelerimizde kullanıyoruz, ancak cevabımı güncellerken şu anda mozilla doktorunu kontrol ettim ve güncellenmiş olduğuna inanıyorum. Şu anda yöntemdir window.scroll(x-coord, y-coord)ve söz veya kullanım örnekleri göstermez objectayarlayabileceğiniz parametre behavioriçin smooth. Ben sadece kodu denedim ve hala krom ve firefox ve nesne parametresi hala spec çalışıyor .

Bu yüzden dikkatli kullanın veya bu Çoklu Dolguyu kullanabilirsiniz . Kenara en kaydırmadan bu polyfill da başka yöntemler ele alır: window.scrollBy, element.scrollIntoViewvs.

ESKİ CEVAP

Bu bizim vanilya javascriptuygulamamız. Basit bir hareket hızı efekti vardır, böylece Kullanıcı Başa Dön düğmesini tıklattıktan sonra şok olmaz .

Çok küçük ve küçültüldüğünde daha da küçülür. Geliştirme aracı jquery yöntemine bir alternatif arıyor ama aynı sonuçları istiyorum bunu deneyebilirsiniz.

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>

Şerefe!

Bu benim için çalışıyor:

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

Tarayıcıya kaydırma yapma şansı vermek için setTimeoutiçinde kısa bir süre kullanır onload.

JQuery ile kullanabilirsiniz

jQuery(window).load(function(){

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

});

Aşağıdaki işlevi kullanın

window.scrollTo(xpos, ypos)

Burada xpos Gerekli. X ekseni (yatay) boyunca piksel olarak kaydırılacak koordinat

ypos da gereklidir. Y ekseni (dikey) boyunca piksel cinsinden kaydırılacak koordinat

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

Bunu kullan

Aşağıdaki kod Firefox, Chrome ve Safari'de çalışır , ancak Internet Explorer'da bunu test edemedim. Birisi test edebilir ve ardından cevabımı düzenleyebilir veya yorum yapabilir mi?

$(document).scrollTop(0);

Saf (animasyonlu) Javascript çözümüm:

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

Açıklama:

window.scrollY tarayıcı tarafından pencerenin kaydırıldığı üstten piksel miktarının koruduğu bir değişkendir.

window.scrollTo(x,y) pencereyi x ekseninde ve y ekseninde belirli miktarda piksel kaydıran bir işlevdir.

Böylece, window.scrollTo(0,window.scrollY-20)sayfayı 20 piksel yukarı taşır.

setTimeoutO zaman o başka 20 piksel (hareketli) ve hareket etmelerini sağlayacak şekilde 10 milisaniye içinde yeniden işlevini çağırır ifhala kaydırma gerekiyorsa deyimi kontrolleri.

Neden html dosyanızın en başında bazı referans öğelerini kullanmıyorsunuz, örneğin

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

ve sonra sayfa yüklendiğinde

$(document).ready(function(){

    top.location.href = '#top';

});

Tarayıcı bu işlev çalıştıktan sonra kayarsa,

$(window).load(function(){

    top.location.href = '#top';

});

Çapraz tarayıcı üste kaydır:

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

Çapraz tarayıcı kimliği = div_id olan bir öğeye kaydırın:

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

Düzenlenmiş sorunuza cevap vermek için onscrollişleyiciyi şu şekilde kaydedebilirsiniz :

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

Bu, ilk kaydırma girişiminin (muhtemelen tarayıcı tarafından otomatik olarak yapılan) etkin bir şekilde iptal edilmesini sağlayacaktır.

Quircks modundaysanız (teşekkürler @Niet the Dark Absol):

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

Katı moddaysanız:

document.documentElement.scrollTop = 0;

Burada jQuery'ye gerek yok.

Bu çalışıyor:

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

Benim durumumda vücut işe yaramadı:

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

Ancak HTML çalıştı:

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

Bu ikisinin birleşimi bana yardımcı oldu. Kaydırmayan bir sidenav vardı beri diğer cevapların hiçbiri bana yardımcı oldu.

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

animasyon olmadan, sadece scroll(0, 0)(vanilya JS)

Herhangi biri sidenav ile açısal ve malzeme tasarımı kullanıyorsa. Bu sizi sayfanın üst kısmına gönderir:

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

Hash'in işi yapması gerekir. Bir başlığınız varsa,

window.location.href = "#headerid";

Aksi takdirde, #

window.location.href = "#";

Ve URL'ye yazılırken, yenilerseniz kalır.

Aslında, bir onclick etkinliğinde yapmak istiyorsanız, JavaScript'e ihtiyacınız yoktur, sadece öğenizin etrafına bir bağlantı koymanız ve # olarak href olarak vermeniz gerekir.

İlk önce gitmek istediğiniz yere boş bir bağlantı etiketi ekleyin

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

Şimdi başlık bölümüne bir işlev ekleyin

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

son olarak gövde etiketine bir onload etkinliği ekleyin

<body onload="GoToTop()">

Herhangi bir X ve Y değeri için çalışan ve sadece scrollDuration eklenmesiyle window.scrollTo api ile aynı olan genel bir sürüm.

* Window.scrollTo tarayıcı api ile eşleşen genel bir sürüm **

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

Bunun başka bir yere gönderildiğini hatırlıyorum (nerede bulamadım), ama bu gerçekten iyi çalışıyor:

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

Tuhaf, ancak çalışma şekli JavaScript'in yığın kuyruğunun çalışma şekline dayanıyor. Tam açıklama burada Sıfır Gecikmeler bölümünde bulunur.

Temel fikir, zamanın setTimeoutgerçekten bekleyeceği süreyi değil, bekleyeceği minimum süreyi belirtmesidir. Bu nedenle, 0ms beklemesini söylediğinizde, tarayıcı diğer sıraya alınmış tüm işlemleri çalıştırır (pencereyi son bulunduğunuz yere kaydırmak gibi) ve geri aramayı yürütür.

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