قم بالتمرير إلى أعلى الصفحة باستخدام 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 في تلك الوظيفة؟ من المرغوب فيه حتى إذا كان شريط التمرير يقفز على الفور إلى الأعلى. أنا لا أبحث عن التمرير السلس.




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




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

document.location.href = "#top";

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




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

window.location = '#'

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

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

output.jsbin.com/fakumo#

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




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

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



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

window.scrollTo(0, 0);




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



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



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

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

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

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

المعلمات :

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



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

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



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

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 للقيام بذلك. ستكفي علامة HTML القياسية ...

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

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



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



التمرير السلس ، 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(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>