masoudch

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

17 پست در این موضوع قرار دارد

ارسال شده در (ویرایش شده)

سلام دوستان

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

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

ممنون

ویرایش شده در توسط masoudch
0

به اشتراک گذاری این پست


لینک به پست

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

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

 

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

 

2

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

در 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
0

به اشتراک گذاری این پست


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

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

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

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


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

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


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

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

 

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

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

 

ممنون

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

1

به اشتراک گذاری این پست


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

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

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

0

به اشتراک گذاری این پست


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

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

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

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

0

به اشتراک گذاری این پست


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

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

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

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

0

به اشتراک گذاری این پست


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

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

بفرمایید.

https://pastebin.com/Yu127WbE

1

به اشتراک گذاری این پست


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

بفرمایید.

https://pastebin.com/Yu127WbE

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

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

0

به اشتراک گذاری این پست


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

 

3

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

در 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
0

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

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

 

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

ویرایش شده در توسط masoudch
0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

0

به اشتراک گذاری این پست


لینک به پست

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

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

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

 

:wub:

0

به اشتراک گذاری این پست


لینک به پست

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

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

0

به اشتراک گذاری این پست


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

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

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

 

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

 

2

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری