jQuery .scrollTop (); + ภาพเคลื่อนไหว


171

ฉันตั้งค่าหน้าเว็บให้เลื่อนไปด้านบนเมื่อคลิกปุ่ม แต่ก่อนอื่นฉันใช้คำสั่ง if เพื่อดูว่าส่วนบนของหน้าไม่ได้ถูกตั้งค่าเป็น 0 จากนั้นถ้าไม่ใช่ 0 ฉันจะขยับหน้าเพื่อเลื่อนไปยังด้านบน

var body = $("body");
var top = body.scrollTop() // Get position of the body

if(top!=0)
{
  body.animate({scrollTop:0}, '500');
}

ส่วนที่ยุ่งยากตอนนี้กำลังเคลื่อนไหวอะไรบางอย่างหลังจากหน้าเลื่อนไปด้านบน ดังนั้นความคิดต่อไปของฉันคือค้นหาสิ่งที่ตำแหน่งหน้า ดังนั้นฉันใช้ console log เพื่อค้นหา

console.log(top);  // the result was 365

สิ่งนี้ทำให้ฉันได้ผลลัพธ์ 365 ฉันคาดเดาว่าเป็นอันดับที่ฉันอยู่ก่อนที่จะเลื่อนขึ้นไปด้านบน

คำถามของฉันคือฉันจะกำหนดตำแหน่งเป็น 0 ได้อย่างไรเพื่อที่ฉันจะสามารถเพิ่มภาพเคลื่อนไหวอื่นที่ทำงานได้เมื่อหน้าอยู่ที่ 0

ขอบคุณ!


1
จำเป็นหรือไม่ที่ปุ่มเหล่านั้นที่คุณใช้ในการมองเห็นเหตุการณ์มักจะเกิดขึ้น? ถ้าไม่เช่นนั้นฉันมีรหัสที่ไม่ต้องการเงื่อนไขใด ๆ ซึ่งสามารถทำได้ง่ายสำหรับเงื่อนไขแรกของคุณ
The Mechanic

1
ไม่ควรมีเครื่องหมายคำพูดรอบมิลลิวินาที "สตริง" เอกสารอ้างอิงหมายถึงช้า / เร็ว
mplungjan

คำตอบ:


313

ในการทำเช่นนี้คุณสามารถตั้งค่าฟังก์ชันการเรียกกลับสำหรับคำสั่งภาพเคลื่อนไหวซึ่งจะดำเนินการหลังจากที่ภาพเคลื่อนไหวการเลื่อนเสร็จสิ้น

ตัวอย่างเช่น:

var body = $("html, body");
body.stop().animate({scrollTop:0}, 500, 'swing', function() { 
   alert("Finished animating");
});

รหัสการแจ้งเตือนนั้นอยู่ที่ไหนคุณสามารถเรียกใช้ javascript เพิ่มเติมเพื่อเพิ่มในภาพเคลื่อนไหวเพิ่มเติม

นอกจากนี้ 'การแกว่ง' ก็เพื่อการผ่อนคลาย ตรวจสอบhttp://api.jquery.com/animate/สำหรับข้อมูลเพิ่มเติม


1
ขอบคุณโทมัสนั่นคือสิ่งที่ฉันต้องการ ฉันยังเพิ่มความล่าช้าเนื่องจากมีการเพิ่มคลาสอย่างรวดเร็ว if (top! = 0) {console.log ("scroll ที่ซ่อนอยู่"); body.animate ({scrollTop: 0}, '500', 'swing', function () {console.log ("เสร็จสิ้นการสร้างภาพเคลื่อนไหว"); leftitems.delay (1000) .removeClass ("สไลด์");}); }
Juan Di Diego

5
ฉันไม่แน่ใจว่าเป็นเพราะโพสต์นี้มีอายุ 4 ปีหรือไม่ แต่ฉันคิดว่าใน jQuery เวอร์ชันใหม่กว่าคุณต้องลบเครื่องหมายคำพูดเดี่ยวเหล่านั้นออกไปตามจังหวะ: body.animate ({scrollTop: 0}, 500, 'swing', ฟังก์ชั่น () {alert ("เสร็จสิ้นการสร้างภาพเคลื่อนไหว");});
Andrew

27
การเรียกกลับของคุณจะดำเนินการสองครั้งเพราะคุณเลือกสององค์ประกอบ
Big McLargeHuge

8
โทมัสมีจุดเพิ่มที่ดีในการเพิ่มเนื้อหาและ HTML กรณีที่ 1. Chrome อ่านเนื้อหาและ srolling, FIrefox ต้องใช้ HTML เพื่อทำมัน
fearis

4
เพิ่งลอง - $ ('html') ไม่ทำงานใน Chrome และ $ ('body') ไม่ทำงานใน Firefox ดังนั้นจำเป็นต้องใช้ $ ('html, body') และการโทร. stop () เป็นสิ่งที่ดี - ฉันพยายามโทรหา animate เร็วขึ้นหลายครั้งด้วย chrome และหลังจากนั้นฉันไม่สามารถเลื่อนหน้าลง
Lev Lukomsky

54

ลองรหัสนี้:

$('.Classname').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
});

8
$("html")ควรจะนำมาใช้แทนเพราะในกรณีของคุณถ้าคุณเพิ่มฟังก์ชั่นการโทรกลับก็จะถูกเรียกว่าสองครั้งครั้งสำหรับHTMLและอีกครั้งสำหรับร่างกาย และการใช้ร่างกายไม่ทำอะไรเลย
flawyte

10
ดูเหมือนว่าขึ้นอยู่กับเบราว์เซอร์ ในบางรายการ $ ('html') อาจไม่ทำอะไรเลยดังนั้นคุณต้องใช้ทั้งคู่และดูแลการเรียกกลับสองครั้ง
commonpike


8

สำหรับสิ่งนี้คุณสามารถใช้วิธีการโทรกลับ

body.animate({
      scrollTop:0
    }, 500, 
    function(){} // callback method use this space how you like
);

7

ลองใช้สิ่งนี้แทน:

var body = $("body, html");
var top = body.scrollTop() // Get position of the body
if(top!=0)
{
       body.animate({scrollTop :0}, 500,function(){
         //DO SOMETHING AFTER SCROLL ANIMATION COMPLETED
          alert('Hello');
      });
}

5

วิธีแก้ปัญหาง่าย ๆ :

เลื่อนไปที่องค์ประกอบใด ๆ ตาม ID หรือ NAME:

SmoothScrollTo("#elementId", 1000);

รหัส:

function SmoothScrollTo(id_or_Name, timelength){
    var timelength = timelength || 1000;
    $('html, body').animate({
        scrollTop: $(id_or_Name).offset().top-70
    }, timelength, function(){
        window.location.hash = id_or_Name;
    });
}

' timelength ' ผ่านไปแล้วในฐานะพารามิเตอร์ดังนั้นไม่จำเป็นต้องประกาศด้วย 'var' ไม่สามารถ 'แก้ไข' คำตอบนี้ได้เนื่องจากมีความยาวน้อยกว่า 6 ตัวอักษร! ;-) +1
Anthony Walsh

@AnthonyWalsh ไม่มีทาง afaik varจำเป็นที่จะต้องไม่เขียนทับโกลบอลหนึ่ง (ถ้ามีตัวแปรโกลบอลที่มีชื่อนั้น)
T.Todua

ค่อนข้างยุติธรรม ;-) ฉันใช้TypeScriptและส่งผ่านตัวเลขโดยตรงเป็นพารามิเตอร์สำหรับช่วงเวลาดังนั้นขอบเขตทั้งหมดในกรณีของฉัน ไชโย!
Anthony Walsh

4

รหัสพร้อมฟังก์ชันคลิก ()

    var body = $('html, body');

    $('.toTop').click(function(e){
        e.preventDefault();
        body.animate({scrollTop:0}, 500, 'swing');

}); 

.toTop= คลาสขององค์ประกอบที่คลิกอาจimgหรือa


4
jQuery("html,body").animate({scrollTop: jQuery("#your-elemm-id-where you want to scroll").offset().top-<some-number>}, 500, 'swing', function() { 
       alert("Finished animating");
    });

0

คุณต้องเห็นสิ่งนี้

$(function () {
        $('a[href*="#"]:not([href="#"])').click(function () {
            if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1000);
                    return false;
                }
            }
        });
    });

หรือลองพวกเขา

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


0

คุณสามารถใช้ทั้งคลาส CSS หรือรหัส HTML เพื่อให้มันสมมาตรฉันมักจะใช้คลาส CSS เช่น

<a class="btn btn-full js--scroll-to-plans" href="#">I’m hungry</a> 
|
|
|
<section class="section-plans js--section-plans clearfix">
$(document).ready(function () {
    $('.js--scroll-to-plans').click(function () {
        $('body,html').animate({
            scrollTop: $('.js--section-plans').offset().top
        }, 1000);
        return false;})
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.