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





15 Answers

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

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

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

javascript jquery scroll

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

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




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

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

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



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

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



مع 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 ثوانٍ يتلاشى




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

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

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

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

المعلمات :

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



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

document.location.href = "#top";

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




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



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

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



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

window.location = '#'

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

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

output.jsbin.com/fakumo#

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




يمكنك محاولة استخدام 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>



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



جرب هذا

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



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

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



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

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/




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

window.scrollTo(0, 0);




Related