رفتن به مطلب

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


پست های پیشنهاد شده

سلام دوستان

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

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

ممنون

ویرایش شده توسط masoudch
لینک به ارسال

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

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

 

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

 

لینک به ارسال
در 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>

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

 

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

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

 

ممنون

ویرایش شده توسط masoudch
لینک به ارسال
در 12 دقیقه قبل، masoudch گفته است :

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

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

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


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

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


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

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

 

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

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

 

ممنون

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بفرمایید.

https://pastebin.com/Yu127WbE

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

بفرمایید.

https://pastebin.com/Yu127WbE

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

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

لینک به ارسال
در 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>

 

لینک به ارسال
در 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

ویرایش شده توسط masoudch
لینک به ارسال

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

 

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

ویرایش شده توسط masoudch
لینک به ارسال

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

لینک به ارسال

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

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

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

 

:wub:

لینک به ارسال

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

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

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

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

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

 

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

 

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

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

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...