اضافه کردن fadeIn به اسکرال به بالا

[Hamed2008]

سلام
من می خواستم که یه اسکرال به بالایی داشته باشم که وقتی صفحه رو به پایین اسکرال میدیم ظاهر شه و وقتی به بالا میره نشون داده نشه یا اینکه توی موقعیت مثلا 100Px رسید نشون بده اگه کمتر بود نشونش نده به این خاصیت میگن fadeIn ....

حالا من می خوام اینرو به کد اسکرالم اضافه کنم اما من چنین اسکرال کدی تا حالا ندیده بودم یکم پیچیده است...
کمکم کنین ممنون میشم./.

<script type="text/javascript">
/*! Jquery scrollto function */
(function(a,c){var b=(function(){var d=c(a.documentElement),f=c(a.body),e;if(d.scrollTo p()){return d}else{e=f.scrollTop();if(f.scrollTop(e+1).scrollT op()==e){return d}else{return f.scrollTop(e)}}}());c.fn.smoothScroll=function(d) {d=~~d||400;return this.find('a[href*="#s5"]').click(function(f){var g=this.hash,e=c(g);if(location.pathname.replace(/^\//,'')===this.pathname.replace(/^\//,'')&&location.hostname===this.hostname){if(e.leng th){f.preventDefault();b.stop().animate({scrollTop :e.offset().top},d,function(){location.hash=g})}}} ).end()}}(document,jQuery));
jQuery(document).ready(function(){
jQuery('html').smoothScroll(700);
});
function s5_page_scroll(obj){ if(jQuery.browser.mozilla) var target = 'html'; else var target='html body'; jQuery(target).stop().animate({scrollTop:jQuery(ob j).offset().top},700,function(){location.hash=obj} ); }
function s5_hide_scroll_to_top_display_none() { if (window.pageYOffset < 300) { document.getElementById("s5_scrolltopvar").style.d isplay = "none"; } }
function s5_hide_scroll_to_top_fadein_class() { document.getElementById("s5_scrolltopvar").classNa me = "s5_scrolltop_fadein"; }
function s5_hide_scroll_to_top() {
if (window.pageYOffset >= 300) {document.getElementById("s5_scrolltopvar").style. display = "block";
document.getElementById("s5_scrolltopvar").style.v isibility = "visible";
window.setTimeout(s5_hide_scroll_to_top_fadein_cla ss,300);}
else {document.getElementById("s5_scrolltopvar").classN ame = "s5_scrolltop_fadeout";window.setTimeout(s5_hide_s croll_to_top_display_none,300);}}
jQuery(document).ready( function() {s5_hide_scroll_to_top();});
jQuery(window).resize(s5_hide_scroll_to_top);
if(window.addEventListener) {
window.addEventListener('scroll', s5_hide_scroll_to_top, false);
}
else if (window.attachEvent) {
window.attachEvent('onscroll', s5_hide_scroll_to_top);
}
</script>
<div id="s5_scrolltopvar" class="s5_scrolltop_fadeout" style="visibility:hidden">
<a href="#s5_scrolltotop" id="s5_scrolltop_a" class="s5_scrolltotop"><?php if ($template_date == "June 2011") {?>Scroll Up<?php } ?></a>
</div>

[iJoomla.org]

ظاهراً شما این کد رو از جایی برداشتید چون اینا همه فقط برای اسکرول تاپ نیست.
من به شما آموزش می دم چطور یه Back to top بنویسید که توی یه اسکرول مشخص Fade in/out بشه.

قبل از هر چیز یادتون باشه که اگر توی کدهای JQuery از $ استفاده کنید، احتمال اینکه به مشکل برنخورید خیلی کمه پس اول جلوی کانفلیک رو بگیرید که کدهاتون با Mootools جوملا (جوملا از Mootools استفاده می کنه) کانفلیکت نکنه. برای این کار باید:

۱. در اولین خط فایل جی کویری خودتون دستور ;()noConflict.$ رو بنویسید.
۲. در طول کد نویسی، بجای $ از jQuery استفاده کنید.

و حالا کدها!
برای اسکرول انیمیشنی به بالای صفحه نیازی به نوشتن کتاب هزار و یک جِی کویری نیست بلکه کافیه همچین دستوری (با فرض بر اینکه آی دیِ المنت شما totop# باشه) بنویسید:

jQuery(document).ready(functio(){
    
    jQuery(function(){
        jQuery('#totop').click(function(){
            jQuery('html, body').animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
    
});

همین!
کد بالا باعث می شه وقتی روی المنت totop# کلیک می شه، صفحه با سرعت ۶۰۰ میلی ثانیه به اسکرول صفر برسه.

و حالا با دستور پایین، المنت totop# رو در اسکرول صفر hide می کنیم:

jQuery('#totop').hide();

حالا وقتی که صفحه تازه باز می شه المنت ما نشون داده نمی شه.
قسمت پایانی عملیات هم نوشتن کدی برای fadeIn المنت در اسکرول بیشتر از مثلاً ۱۰۰ پیکسل و fadeOut اون در اسکرول کمتر از این عدد هستش. این کار رو بصورت زیر انجام می دیم:

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 100) {
        jQuery('#totop').fadeIn();
    } else {
        jQuery('#totop').fadeOut();
    }
});

در این مرحله تمام کارهایی که باید انجام می دادیم به انجام رسیده. کد کامل شده این سناریو رو براتون می نویسم که یه وقت جابجا ننویسید:

/*
** JQuery functions of back to top button
** License        GPL v3.0
** Copyright        (C) 2014 - Shahrokhi.me. All Rights Reserved.
** Author        Amin Shahrokhi
** URL            https://shahrokhi.me
** Email        support@shahrokhi.me
** Creation date    September 2014
*/


jQuery(document).ready(functio(){
    
    // Scrolling to the top of the html/body when #totop is clicked
    jQuery(function(){
        jQuery('#totop').click(function(){
            jQuery('html, body').animate({ scrollTop: 0 }, 600);
            return false;
        });
    });
    
    // Hide #totop on page load
    jQuery('#totop').hide();
    
    // Fade in/out #totop regarding to the scrollTop value
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('#totop').fadeIn();
        } else {
            jQuery('#totop').fadeOut();
        }
    });
    
});

[Hamed2008]

با سلام
کد بالا همش مربوط به scroll go to top هستش...در ضمن scroll از نوع smoothly با استایل در مرورگرها و با خاصیت variable هستش...اما من از variable توی این مورد بلد نیستم
چه جوری fade بدم بهش... اگه دقت کنین خودش fade in و out و offset داره اما هر عددی بزارم کار نمیکنه....

کدهایی که گذاشتین ممنون ولی خودم همه ی اینارو بلدم..
بازم ممنون

[iJoomla.org]

متأسفانه بعضی از دوستان سئوال می پرسن ولی جواب رو نمی خونن اینجا.

کدهایی که گذاشتین ممنون ولی خودم همه ی اینارو بلدم..

یعنی شما واقعاً اینو خودتون بلد بودید ولی باز اومدید پرسیدید:

jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 100) {
            jQuery('#totop').fadeIn();
        } else {
            jQuery('#totop').fadeOut();
        }
    });

کد بالا همش مربوط به scroll go to top هستش

نخیر! فقط مربوط به اسکرول به بالا نیست.
با دقت و به نیت یادگرفتن بخونید چی نوشتم متوجه می شید!

در ضمن scroll از نوع smoothly با استایل در مرورگرها و با خاصیت variable هستش...اما من از variable توی این مورد بلد نیستم

نخیر! همچین چیزی نه به استایل مربوطه و نه به متغیر.
با دقت و به نیت یادگرفتن بخونید چی نوشتم متوجه می شید!

چه جوری fade بدم بهش

این رو هم توی پست قبلی نوشتم.
با دقت و به نیت یادگرفتن بخونید چی نوشتم متوجه می شید!

اگه دقت کنین خودش fade in و out و offset داره اما هر عددی بزارم کار نمیکنه

شما هم اگه دقت کنین، دلیل منطقی استفاده از کد پیشنهادی رو هم شرح داده بودم.
با دقت و به نیت یادگرفتن بخونید چی نوشتم متوجه می شید!

.......... و در آخر "

بازم ممنون"

این روش تشکر کردن در همچین انجمنی و در ازای همچین پاسخی نیست عزیزم.



یه وقتایی یه کارایی می بینم که خجالت می کشم به خودم بگم طراح.
اگه بدونید...!
خیلی راه مونده هنوز دوستان!
خیلی...!