jQuery .scrollTop (); + एनीमेशन

Question

जब एक बटन क्लिक किया जाता है तो मैं स्क्रॉल करने के लिए पृष्ठ सेट करता हूं। लेकिन पहले मैंने एक स्टेटमेंट का उपयोग यह देखने के लिए किया कि क्या पृष्ठ का शीर्ष 0. पर सेट नहीं है, तो यदि यह 0 नहीं है तो मैं पृष्ठ को शीर्ष पर स्क्रॉल करने के लिए चेतन करता हूं।

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

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

मुश्किल हिस्सा अब कुछ को एनिमेट कर रहा है, पृष्ठ के शीर्ष पर स्क्रॉल किया गया है। तो मेरा अगला विचार यह है, पता करें कि पृष्ठ स्थिति क्या है। इसलिए मैंने यह पता लगाने के लिए कंसोल लॉग का उपयोग किया।

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

इसने मुझे 365 का परिणाम दिया, मैं अनुमान लगा रहा हूं कि शीर्ष स्थान पर पहुंचने से पहले मैं यही स्थिति नंबर था।

मेरा सवाल यह है कि मैं 0 होने की स्थिति कैसे निर्धारित करूं, ताकि पेज 0 पर एक बार चलने वाला एक और एनीमेशन जोड़ सकूं?

धन्यवाद!

Comments

यह आवश्यक है कि उन बटन जिस पर आप आग की घटना हमेशा दिखाई देते हैं? यदि नहीं, तो मेरे पास एक कोड है जिसे किसी भी प्रकार की शर्त की आवश्यकता नहीं है जो आपकी पहली शर्त के लिए आसान हो सकती है

— मैकेनिक

मिलीसेकंड के आसपास उद्धरण नहीं होना चाहिए। "स्ट्रिंग" प्रलेखन को संदर्भित करता है धीमी / तेज

— mplungjan

Answer 1

ऐसा करने के लिए, आप चेतन कमांड के लिए एक कॉलबैक फ़ंक्शन सेट कर सकते हैं जो स्क्रॉल एनीमेशन समाप्त होने के बाद निष्पादित करेगा।

उदाहरण के लिए:

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

जहां वह अलर्ट कोड है, आप आगे की एनीमेशन में जोड़ने के लिए अधिक जावास्क्रिप्ट को निष्पादित कर सकते हैं।

इसके अलावा, सहजता को स्थापित करने के लिए 'स्विंग' है। की जाँच करें http://api.jquery.com/animate/ अधिक जानकारी के लिए।

Comments

धन्यवाद थॉमस, यही मुझे चाहिए था। क्लास में इतनी जल्दी शामिल होने के बाद मैंने देरी भी की। अगर (शीर्ष! = 0) {कंसोल.लॉग ("हिडन स्क्रॉल"); body.animate ({स्क्रॉलटॉप: 0}, '500', 'स्विंग', फंक्शन () {कंसोल.लॉग ("ऐनिमेटेड" "); लेफ्टीमेंट्सडेल (1000) .removeClass (" स्लाइड ");}); }

— जुआन डि डिएगो

मुझे यकीन नहीं है कि अगर यह पोस्ट 4 साल पुरानी है, लेकिन मुझे लगता है कि jQuery के नए संस्करणों में आपको समय के आसपास उन एकल उद्धरणों को हटाने की आवश्यकता है: body.animate ({स्क्रॉलटॉप: 0}, 500, 'स्विंग',) समारोह () {चेतावनी ("समाप्त एनिमेशन");});

— एंड्रयू

आपका कॉलबैक दो बार निष्पादित होगा, वैसे, क्योंकि आपने दो तत्वों का चयन किया था।

— बिग मैकलर्जह्यूज

थॉमस के शरीर और HTML को जोड़ने में अच्छी बात थी। केस 1. क्रोम रीडिंग बॉडी और क्रॉलिंग, FIrefox को इसे करने के लिए html की आवश्यकता होती है।

— डरिस

बस कोशिश की गई - $ क्रोम (क्रोमियम) में काम नहीं करता है और फायरफॉक्स में $ ('बॉडी') काम नहीं करता है, इसलिए $ ('html, बॉडी') की जरूरत है। और कॉलिंग भी .stop () एक अच्छी बात है - मैंने क्रोम में कई बार जल्दी से चेतन को कॉल करने की कोशिश की और उसके बाद मैं पेज को नीचे स्क्रॉल नहीं कर सका।

— लेव लुकोम्स्की

Answer 2

इस कोड को आज़माएं:

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

Comments

$("html")इसके बजाय इसका उपयोग किया जाना चाहिए, क्योंकि आपके मामले में यदि आप कॉलबैक फ़ंक्शन जोड़ते हैं, तो इसे दो बार कहा जाएगा, एक बार HTML के लिए और एक बार शरीर के लिए । और शरीर का उपयोग करने से कुछ नहीं होता।

— दोषपूर्ण

ऐसा लगता है कि ब्राउज़र पर निर्भर करता है। कुछ में, $ ('html') कुछ भी नहीं कर सकता है, इसलिए आपको दोनों का उपयोग करने की आवश्यकता है, और कॉलबैक का दो बार ध्यान रखना चाहिए।

— आम डाक

Answer 3

इसे इस्तेमाल करो:

$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500);
    }

});

Answer 4

इसके लिए आप कॉलबैक विधि का उपयोग कर सकते हैं

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

Answer 5

इसके बजाय यह प्रयास करें:

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

Answer 6

सरल समाधान:

किसी भी तत्व को 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;
    });
}

Comments

' समयबद्धता ' पहले से ही एक पैरामीटर के रूप में पारित हो चुकी है, इसलिए इसे 'var' के साथ घोषित करने की कोई आवश्यकता नहीं है। इस उत्तर का एक 'संपादन' संभव नहीं था, क्योंकि यह 6 वर्णों से कम था! ;-) +1

— एंथनी वाल्श

@AnthonyWalsh कोई रास्ता नहीं varवैश्विक एक को अधिलेखित करने की आवश्यकता नहीं है (यदि उस नाम के साथ वैश्विक चर मौजूद है)

— T.Todua

मेले पर्याप्त ;-) मैं उपयोग कर रहा हूँ टाइपप्रति और के लिए सीधे एक संख्या में गुजर एक पैरामीटर के रूप timelength तो मेरे मामले में सभी स्थानीय गुंजाइश। चीयर्स!

— एंथनी वाल्श

Answer 7

क्लिक फ़ंक्शन के साथ कोड ()

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

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

}); 

.toTop= क्लिक किए गए तत्व की श्रेणी शायद imgयाa

Answer 8

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

Answer 9

आपको यह अवश्य देखना चाहिए

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

Answer 10

$("body").stop().animate({
        scrollTop: 0
    }, 500, 'swing', function () {
        console.log(confirm('Like This'))
    }
);

Answer 11

आप सीएसएस वर्ग या HTML आईडी दोनों का उपयोग कर सकते हैं, इसे सममित रखने के लिए मैं हमेशा उदाहरण के लिए सीएसएस वर्ग का उपयोग करता हूं

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