JavaScript kullanarak sayfanın en üstüne kaydırılsın mı?

JavaScript kullanarak sayfanın üstüne nasıl geçebilirim? Kaydırma çubuğu anında üste sıçrasa bile arzu edilir. Düzgün bir kaydırma aramıyorum.

Canlandırmak için değişikliğe ihtiyacınız yoksa, herhangi bir özel eklenti kullanmanıza gerek yoktur - sadece yerel JavaScript penceresini kullanırım. ScrollTo yöntemi - 0,0 değerini geçmek sayfayı anında sol üste kaydırır .

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

Parametreler

• x-coord, yatay eksen boyunca pikseldir.
• y-coord, dikey eksen boyunca pikseldir.

Düzgün kaydırma istiyorsanız, böyle bir şey deneyin:

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

Bu, herhangi bir <a>etiketi alır href="#top"ve pürüzsüz bir şekilde yukarı kaydırır.

Üstte ilerlemek için bunu deneyin

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

Akıcı animasyonla daha iyi çözüm:

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

Referans: https://developer.mozilla.org/tr-TR/docs/Web/API/Window/scrollTo#Example

Bunu yapmak için jQuery gerekmez. Standart bir HTML etiketi yeterli olacaktır ...

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

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

Tüm bu öneriler çeşitli durumlar için harika çalışıyor. Bir aramadan bu sayfayı bulmak isteyenler için, biri de verebilir bu deneyin. JQuery, eklenti yok, öğeye ilerleyin.

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

pürüzsüz kaydırma, saf javascript:

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

Düzenle:

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

Üst ve sol kenar boşluğuna sahip başka bir kaydırma:

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

<script>

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

html'de

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

Gerçekten garip: Bu soru beş yıldır aktif ve kaydırmayı canlandırmak için hala vanilya JavaScript yanıtı yok ... İşte burada:

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)

İsterseniz, bunu bir işlevde sarabilir ve onclicköznitelik yoluyla çağırabilirsiniz . Bu jsfiddle'ı kontrol edin

Not: Bu çok temel bir çözümdür ve belki de en performanslı çözüm değildir. Çok ayrıntılı bir örnek burada bulunabilir: https://github.com/cferdinandi/smooth-scroll

Düzgün kaydırma yapmak istiyorsanız, lütfen şunu deneyin:

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

Başka bir çözüm JavaScript window.scrollTo yöntemidir:

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

Parametreler:

• x-değeri yatay eksen boyunca pikseldir.
• y değeri, dikey eksen boyunca pikseldir.

İle window.scrollTo(0, 0);çok hızlı
yani Mark Ursino örneğini denedim, ancak Chrome'da hiçbir şey olmuyor
ve bunu buldum

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

tüm 3 tarayıcıları test ve
blueprint css kullanıyorum çalışır
Bu bir müşteri "Şimdi rezervasyon yap" düğmesini tıkladığında ve kiralama süresi seçili değilse, yavaş yavaş takvimlerin olduğu yere üste gider ve 2 alan, 3 saniye sonra kaybolur

Bir sürü ait kullanıcı şöyle çapraz tarayıcı uyumluluğu için hem html ve vücut etiketler seçmenizi öneririz:

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

Bu, yalnızca bir kez çalışan geri aramanıza güveniyorsanız sizi uyarabilir. Aslında iki öğe çalışacak çünkü iki öğe seçtiniz.

Bu sizin için bir sorunsa, böyle bir şey yapabilirsiniz:

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

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

Bunun Chrome'da çalışmasının nedeni $('html').scrollTop()0 döndürür, ancak Firefox gibi diğer tarayıcılarda olmaz.

Kaydırma çubuğunun zaten üstte olması durumunda animasyonun tamamlanmasını beklemek istemiyorsanız, şunu deneyin:

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

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

    callback();
}

Yaşlılar #tophile yapabilir

document.location.href = "#top";

FF, IE ve Chrome'da iyi çalışır

Bunu dene

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

$(document).scrollTop(0); ayrıca çalışır.

JQuery dışı çözüm / saf JavaScript:

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

Bu çalışacak:

window.scrollTo(0, 0);

Bu kodu deneyin:

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

div => Dom Kaydırmayı taşımak istediğiniz öğe.

time => milisaniye, kaydırma hızını tanımlayın.

Saf JavaScript çözümü:

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

Codepen'e animasyonlu bir çözüm yazıyorum

Ayrıca, CSS scroll-behavior: smoothözelliği ile başka bir çözüm deneyebilirsiniz .

html {
    scroll-behavior: smooth;
}

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

Neden JQuery dahili işlev scrollTop kullanmıyorsunuz:

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

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

Kısa ve basit!

JQuery'ye ihtiyacınız yok. Sadece betiği arayabilirsiniz

window.location = '#'

"En üste git" düğmesini tıkladığınızda

Örnek demo:

output.jsbin.com/fakumo#

Not: Angularjs gibi modern kütüphaneleri kullanırken bu yaklaşımı kullanmayın. Bu URL hashbang kırdı olabilir.

En üste doğrudan gitmek için bu komut dosyasını kullanın.

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

Düzgün kaydırma istemiyorsanız, düzgün kaydırma animasyonunu başlar başlamaz hile yapabilir ve durdurabilirsiniz ... şöyle:

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

Tavsiye edilip edilmediğine dair hiçbir fikrim yok, ama işe yarıyor :)

Bunu ne zaman kullanırsın? Emin değilim, ama belki bir şeyi Jquery ile canlandırmak için bir tıklama kullanmak istediğinizde, ancak animasyon olmadan başka bir şey yapmak istediğinizde? ör. sayfanın üst kısmındaki bir slayt girişi yönetici giriş panelini açın ve görmek için anında en üste atlayın.

Motivasyon

Bu basit çözüm yerel olarak çalışır ve herhangi bir konuma yumuşak bir kaydırma uygular.

#Bence, bir bölüme bağlantı vermek istiyorsanız yararlı olan bağlantı bağlantılarını (bunlara sahip olanlar ) kullanmaktan kaçınır , ancak bazı durumlarda, özellikle üste işaret ederken iki farklı URL'yi gösteren aynı yer ( http://www.example.org ve http://www.example.org/# ).

Çözüm

Kaydırmak istediğiniz etikete, örneğin bu soruyu cevaplayan ilk bölümünüze bir kimlik koyun , ancak kimlik sayfanın her yerine yerleştirilebilir.

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

Daha sonra bir düğme olarak bir bağlantı kullanabilirsiniz, onclick niteliğini böyle bir kodla düzenleyin .

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

Argümanı nerede document.getElementByIdolduğu id etiketi Tıklama sonra doğru kaydırarak istiyorum.

Bağlantınızdan #someid gibi bir hedef kullanabilirsiniz; burada #someid div kimliğidir.

Veya bunu daha zarif hale getiren herhangi bir sayıda kaydırma eklentisini kullanabilirsiniz.

http://plugins.jquery.com/project/ScrollTo bir örnektir.

JS'yi bu Fiddle'daki gibi kullanmayı deneyebilirsiniz http://jsfiddle.net/5bNmH/1/

Sayfa altbilginize "En üste git" düğmesini ekleyin:

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

Yukarıdaki yanıtların hiçbiri SharePoint 2016'da çalışmaz.

Bunun gibi yapılması gerekir: /sharepoint/195870/

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