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

[reza_5180 8]

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

[SM-Mahdavi 5428]

سلام

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

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

[themento 348]

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

http://codepen.io/diesel1064/pen/DaJHs

http://stackoverflow.com/questions/18831970/jquery-smooth-scroll-to-div-using-id-value-from-link

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

[reza_5180 8]

دوستان از اینایی که گذاشتید چیزی نصیبم نشد. میشه بیشتر راهنمایی کنید

[themento 348]

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

[reza_5180 8]

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

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

<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>

[themento 348]

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

[reza_5180 8]

نه میخوام به یک جا بره

لطف میکنید بگید که باید چی کار کنم با همین اسکریپت

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

[themento 348]

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

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

scrollTop: 0

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

scrollTop: 500

[reza_5180 8]

الان اینکارو میتونم واسه بالا به پایین هم انجام بدم؟

[themento 348]

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

ویرایش شده آبان 93 توسط ali.amini

[imanfakhar 26231]

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

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

bookmarkscroll.zip

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

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

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

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

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

رو اضافه کنید

[reza_5180 8]

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

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

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

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

[themento 348]

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

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

[reza_5180 8]

درست شد

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

ممنون

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

ویرایش شده آبان 93 توسط reza_5180

[themento 348]

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

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

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

ویرایش شده آبان 93 توسط ali.amini