ایجاد دکمه رفتن به بالای صفحه

[unid_user 63]

سلام دوستان

میخوام یه دکمه در فوتر قرار بدم که آیکن فلش به سمت بالا داشته باشه و با کلیک کردن روی اون اسکرول به بالای صفحه منتقل بشه. لطفا راهنمایی کنید.

این دکمه ایجاد کردم ولی میخوام اسکرول خیلی آروم بره بالا. از جاوا اسکریپت هم استفاده نکردم.

ممنون

ویرایش شده مرداد 96 توسط masoudch

[Mobin 1669]

اگه میخواهید اروم بره بالا باید از جاوا اسکریپت استفاده کنید

میتونین از یکی از 2 کد زیر استفاده کنید

 

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

 

[unid_user 63]

در 2 ساعت قبل، lord_viper گفته است :

اگه میخواهید اروم بره بالا باید از جاوا اسکریپت استفاده کنید

میتونین از یکی از 2 کد زیر استفاده کنید

 

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

 

کار نکرد فک کنم اشتباه از من باشه.

من به این صورت کار کردم:

اول یه تگ a ساختم و href رو برابر # قرار دادم.

<a href="#">برو بالا</a>

بعد کدی که سما دادید رو در تگ script پایین صفحه کپی کردم:

<script>
      $('a[href=#top]').click(function(){
      $('body').animate({
      scrollTop: 0},4000);});
</script>

حالا وقتی روی برو بالا کلیک میکنم بازم خیلی سریع میره.انگار که هیچ تغییری نکرده باشه.

 

همچنین میخوام وقتی روی هر قسمت از منو کلیک میکنم خیلی نرم و آروم بره به سکشن مربوط به اون منو.

مثلا وقتی روی لینک منوی تماس باما کلیک کردم خیلی آروم اسکرول کنه به قسمت تماس باما ولی مقطعی میره یعنی تیکه تیکه میره.

 

ممنون

ویرایش شده مرداد 96 توسط masoudch

[mehran-b 2385]

در 12 دقیقه قبل، masoudch گفته است :

کار نکرد فک کنم اشتباه از من باشه.

من به این صورت کار کردم:

اول یه تگ a ساختم و href رو برابر # قرار دادم.

<a href="#">برو بالا</a>

بعد کدی که سما دادید رو در تگ script پایین صفحه کپی کردم:

<script>
      $('a[href=#top]').click(function(){
      $('body').animate({
      scrollTop: 0},4000);});
</script>

حالا وقتی روی برو بالا کلیک میکنم بازم خیلی سریع میره.انگار که هیچ تغییری نکرده باشه.

 

همچنین میخوام وقتی روی هر قسمت از منو کلیک میکنم خیلی نرم و آروم بره به سکشن مربوط به اون منو.

مثلا وقتی روی لینک منوی تماس باما کلیک کردم خیلی آروم اسکرول کنه به قسمت تماس باما ولی مقطعی میره یعنی تیکه تیکه میره.

 

ممنون

href لینک رو باید #top بذارید و کتابخانه jquery هم باید به صفحه اضافه کرده باشید تا کد درست کار کنه.

[unid_user 63]

در 1 دقیقه قبل، mehran-b گفته است :

href لینک رو باید #top بذارید و کتابخانه jquery هم باید به صفحه اضافه کرده باشید تا کد درست کار کنه.

دوباره همونه درست نشد.

[mehran-b 2385]

در هم اکنون، masoudch گفته است :

دوباره همونه درست نشد.

خوب حتما یه جای کار اشتباهه دیگه چون کد درسته.

نمونه ای چیزی دراید ارسال کنید بفهمیم مشکل از کجاست؟

[unid_user 63]

در هم اکنون، mehran-b گفته است :

خوب حتما یه جای کار اشتباهه دیگه چون کد درسته.

نمونه ای چیزی دراید ارسال کنید بفهمیم مشکل از کجاست؟

نمونه یک قالب کامله که نمیتونم ارسال کنم. میتونید یه نمونه کوچیک بنویسید؟ خیلی برام مهمه. ممنون

[mehran-b 2385]

در 11 دقیقه قبل، masoudch گفته است :

نمونه یک قالب کامله که نمیتونم ارسال کنم. میتونید یه نمونه کوچیک بنویسید؟ خیلی برام مهمه. ممنون

بفرمایید.

https://pastebin.com/Yu127WbE

[unid_user 63]

در 10 ساعت قبل، mehran-b گفته است :

بفرمایید.

https://pastebin.com/Yu127WbE

نمیدونم چرا تو قالب کار نمیکنه؟! 

من دقیقا مثل ویدئو آموزشی طراحی کردم. چرا این قسمت کار نمیکنه؟

[Mirrajabi 455]

در 14 ساعت قبل، masoudch گفته است :

نمیدونم چرا تو قالب کار نمیکنه؟! 

من دقیقا مثل ویدئو آموزشی طراحی کردم. چرا این قسمت کار نمیکنه؟

<span id="top-link-block" class="hidden">
                <a href="#top" class=""  onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
                  <i class="fa fa-chevron-circle-up" aria-hidden="true"></i>
                </a>
</span>
<script>
  jQuery(document).ready(function(){
      if ( (jQuery(window).height() + 100) < jQuery(document).height() ) {
        jQuery('#top-link-block').removeClass('hidden').affix({
            // how far to scroll down before link "slides" into view
            offset: {top:100}
        });
    }
     });
</script>
<style>
#top-link-block.affix{
    position: fixed;
    bottom:60px; 
    right: 27px;
    font-size:35px;
}
#top-link-block.affix a{
    outline:white;
    color: #c7c7c7;
    opacity: .3;
}
</style>

 

[unid_user 63]

در 2 ساعت قبل، Mirrajabi گفته است :

<span id="top-link-block" class="hidden">
                <a href="#top" class=""  onclick="$('html,body').animate({scrollTop:0},'slow');return false;">
                  <i class="fa fa-chevron-circle-up" aria-hidden="true"></i>
                </a>
</span>
<script>
  jQuery(document).ready(function(){
      if ( (jQuery(window).height() + 100) < jQuery(document).height() ) {
        jQuery('#top-link-block').removeClass('hidden').affix({
            // how far to scroll down before link "slides" into view
            offset: {top:100}
        });
    }
     });
</script>
<style>
#top-link-block.affix{
    position: fixed;
    bottom:60px; 
    right: 27px;
    font-size:35px;
}
#top-link-block.affix a{
    outline:white;
    color: #c7c7c7;
    opacity: .3;
}
</style>

 

سلام ممنون بابت راهنماییتون من استایل و داخل تگ head قرار دادم و باقی کدها رو هم در تگ body اما هیچی تو صفحه مرورگرم نمیبینم.

فایل و پیوست کردم:

index.html

ویرایش شده مرداد 96 توسط masoudch

[unid_user 63]

آقا اشتباه از من بود واقعا خیلی خیلی ازت ممنونم زنده باد. کاملا درسته درسته.

 

فقط یه پرسش دیگه! چطوری میتونم سرعت اسکرول کردنش رو تغییر بدم؟

ویرایش شده مرداد 96 توسط masoudch

[unid_user 63]

میخوام وقتی روی منوها کلیک میکنم، اسکرول دقیقا روی سکشن مربوط به همون منو به آرومی قرار بگیره. الان خیلی سریع و تیکه تیکه میاد لطفا من و راهنمایی کنید. ممنون.

[unid_user 63]

دوستان لطفا راهنمایی کنید. خیلی ممنون.

[unid_user 63]

دوستان عزیز پاسخ پرسش رو پیدا کردم!

در این لینک هست. امیدوارم مفید باشه برای شما هم.

https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery

 

[unid_user 63]

حالا یه سوال دیگه! 

اگه بخوام با اومدن اسکرول به قسمتی از صفحه مثلا 500px بیاد پایین یکسری کارها انجام بشه این چطوری میشه. دوستان عزیز.

[Mirrajabi 455]

در ۱ ساعت قبل، masoudch گفته است :

حالا یه سوال دیگه! 

اگه بخوام با اومدن اسکرول به قسمتی از صفحه مثلا 500px بیاد پایین یکسری کارها انجام بشه این چطوری میشه. دوستان عزیز.

 

	jQuery(window).scroll(function() {
	
    if (jQuery(this).scrollTop() === 500) { // this refers to window
        alert("You've scrolled 500 pixels.");
    }
});