رفتن به مطلب

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


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

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

لینک به ارسال

سلام

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

http://jquery-plugins.net/jquery-goup-jquery-scroll-to-top-plugin

لینک به ارسال

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

لینک به ارسال

الان اول یه سوال در اسکرول کردن

من با این کد سایتم رو از پایین به بالا انتقال میدم. میشه یه تغییراتی بدم که با همین اسکریپت ، انتقال سایتم رو از جایی که میخوام به جای دیگر انجام دهد؟


<script>
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>

لینک به ارسال

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

لینک به ارسال

راه درستش این نیست که این کد رو تغییر بدین.

ولی اگه میخواین باید در این خط که نوشته:


scrollTop: 0

عدد صفر رو تغییر بدین تا به جای مورد نظر برسین. مثلا:


scrollTop: 500

لینک به ارسال

بله ولی نه با این کد. تو لینک هایی که ضمیمه کردم آموزشش هست. اگه متوجه نشدید تا بیشتر توضیح بدم.

ویرایش شده توسط ali.amini
لینک به ارسال

ضمنا می تونید:

1. این اسکریپت را دانلود و آپلود کنید داخل پوشه قالبتون

bookmarkscroll.zip

2. این کد را به header.php اضافه کنید


<script src="<?php bloginfo('template_directory');?>/bookmarkscroll.js"></script>

3. به محل هایی که می خواهید صفحه به اونجاها اسکرول بشه آی دی مناسب بدید (مثلا example)

4. به عنصری که قراره با کلیک روش اسکرول انجام بشه کد


onclick="bookmarkscroll.scrollTo('example')"

رو اضافه کنید

لینک به ارسال

این آموزش http://codepen.io/diesel1064/pen/DaJHs

همه کار هارو انجام میدم. هم css و هم js هارو وارد میکنم

اما وقتی کلیک میکنم بصورت jquery نمیاد پایین

استاد عزیز ممنون اما من واسه وبلاگی دارم درست میکنم که فقط html هستش

لینک به ارسال

به ul کلاس nav دادین؟ کتابخانه جیکوئری رو فراخوانی کردید؟

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

لینک به ارسال

درست شد

http://daveevans.me/js/jquery.smooth-scroll.min.js این رو که کپی کردم درست شد

ممنون

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

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

اینو به داخل تگ script بذار:


setTimeout(function(){
$('#back-top').remove();
}, 5000);

و به جای 5000 عدد دلخواه رو بزار. 5000=5ثانیه

ویرایش شده توسط ali.amini
لینک به ارسال

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

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

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

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

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

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

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

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

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