قم بالتمرير إلى أعلى الصفحة باستخدام JavaScript / jQuery؟



Answers

إذا كنت تريد تمريرًا سلسًا ، فجرّب شيئًا كالتالي:

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

سيؤدي ذلك إلى استخدام أي علامة <a> tag href="#top" وجعلها سلسة بالتمرير لأعلى.

Question

لدي <button> على الصفحة ، عندما يتم الضغط على هذا الزر ، يتم عرض <div> مخفية باستخدام jQuery.

كيف يمكنني التمرير إلى أعلى الصفحة باستخدام أمر JavaScript / jQuery في تلك الوظيفة؟ من المرغوب فيه حتى إذا كان شريط التمرير يقفز على الفور إلى الأعلى. أنا لا أبحث عن التمرير السلس.




إذا كنت تريد إجراء التمرير السلس ، فيرجى تجربة ذلك:

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

حل آخر هو طريقة JavaScript window.scrollTo:

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

المعلمات :

  • القيمة x هي البكسل على طول المحور الأفقي.
  • قيمة y هي البكسل على طول المحور الرأسي.



التمرير السلس ، javascript الصافي:

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



إذا كنت تريد التمرير إلى أي عنصر بمعرف ، فجرّب ذلك:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``



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



لا تحتاج JQuery. ببساطة يمكنك استدعاء البرنامج النصي

window.location = '#'

عند النقر على الزر "انتقال إلى أعلى"

نموذج العرض التوضيحي:

output.jsbin.com/fakumo#

ملاحظة: لا تستخدم هذا النهج ، عند استخدام المكتبات الحديثة مثل angularjs. قد يؤدي ذلك إلى كسر عنوان URL hashbang.




عندما يكون التمرير العلوي أعلى من الحد الأدنى من الحد السفلي والسفلي لأعلى التمرير رأس الصفحة هو مثبت. أدناه انظر مثال كمان.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/




حل غير jQuery / جافا سكريبت خالص:

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



مع 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
هذا عندما ينقر العميل على زر "احجز الآن" ولا يحتوي على فترة التأجير المحددة ، ينتقل ببطء إلى الأعلى حيث توجد التقويمات ويفتح مربع حوار يشير إلى الحقلين ، بعد 3 ثوانٍ يتلاشى




هذا سيفي بالغرض:

window.scrollTo(0, 0);




لست بحاجة إلى jQuery للقيام بذلك. ستكفي علامة HTML القياسية ...

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

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



<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>



جرب هذا

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>



يمكن أن تفعل #top القديمة الخدعة

document.location.href = "#top";

يعمل بشكل جيد في FF و IE و Chrome




يمكنك محاولة استخدام JS كما في هذا http://hfiddle.net/5bNmH/1/ Fiddle

إضافة الزر "انتقال إلى أعلى" في تذييل الصفحة الخاص بك:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>



Related