بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]
پرسش و پاسخ

سوال در مورد اسکرول شدن اتوماتیک صفحه

مشاهده پاسخ‌ها 3
مدیریت گفتگو
ARROW 11 سال پیش
آخرین تغییر: 11 سال پیش

سلام و ضمن تبریک سال جدید

یه سوال داشتم این سایتهای تک صفحه ای که وقتی رو لینک یا محصول یا چیزی کلیک میکنی ،بلا فاصله توضیحات یا محصولات رو در داخل همون صفحه نشون میده ،از چه تگهایی استفاده میشه ؟

نظرات

ARROW 11 سال پیش
کاش یگ مهندسی جواب مارو هم میداد.همچنان منتظر دریافت پاسخ هستیم از دیشب
reza piry ghadim 11 سال پیش
حسین جان یادته استاد تو jquery یه span رو مخفی میکرد بعد با زدن دکمه نشونش میداد؟ یعنی با زدن یه دکمه متن یا تصویر یا هر چیز دیگه ای که مخفیه میاد بالا. فکر کنم اینجوری باشه
ARROW 11 سال پیش
فراموش کردم داش همه چیزرو :( کلا نمیخوام مخفی بشه ،یعنی وقتی که کلیک میکنی رو یه لینک مثلا رو منو تماس با ما گلیک کنی مارو هدایت میکنه به ته همون صفحه یعنی فرم تماس با ما
Mr Mehdi 11 سال پیش
احتمال زیاد با دستورات scroll توی jquery هست
AAA 11 سال پیش
سلام داداشی. ببخشید دیر جواب دادم پیامتو الان دیدم. اگه بخوام برات همه ی کد رو بنویسیم ممکنه قاطی کنی , برو به قسمت ((بخش پنجم - JS مقدماتی مقدماتی)) -> فیلم ((( 05-03 Using jQuery))) یا همون فیلم ((((((((از جی کوئری استفاده کنیم !)))))))))) رو نگاه کن مطمئنم مشکلت برطرف میشه . اگه مشکلت حل شد یه (حل شد) هم به آخر سوالت اضافه کن :)
AAA 11 سال پیش
هیچ مهندسی هم وجود نداشت ظاهرا :)))))))))))))))
ARROW 11 سال پیش
مرسی دوستان. منظور من همون بود که آقا مهدی گفته بودن.تشکر بابت یاد آوری در آینده حتما استفاده میکنم از همون بخش.

پاسخ‌ها 3

ARROW 11 سال پیش

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

دسمتزد هم محفوظه

نظرات

Mr Mehdi 11 سال پیش

به سادگی آب خوردن هست. نمیدونم اون منبعی که دادم رو خوندی یا نه اما کامل واضحه. اما خب بذار یه توضیح کلی هم بدم.

قدم اول اینه که این کد jQuery رو وارد صفحه کنید (که دیگه باید این کار رو بلد باشید)

 $(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

در واقع کار این کد اینه که هرجا روی لینک داخلی کلیک بشه با استفاده از یه انیمیشن ساده اسکرول رو انجام میده. اما قضیه لینک داخلی چیه؟ لینک داخلی رو با استفاده از id ها بوجود میارن. مثلا لینک example.com/index.html/#bottom داره به id ای به نام bottom توی صفحه index.html اشاره می کنه. دقیقا شما به جای اینکه مثلا لینکهای منوتون رو به بیرون لینک بدید کافیه a رو اینطوری بنویسید. مثلا:

 <a href="#bottom">Bottom Page</a>

این لینک داره به المنتی با id به نام bottom اشاره می کنه که مثلا این آیدی میتونه این شکلی باشه (یا هرچیزی مثل h1):

 <h1 id="bottom">Bottom Page</id>

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

دیگه ساده تر از این نمیتونستم توضیح بدم شرمنده امیدوارم گرفته باشی :|

این لینک منبع و اینم لینک دمو

نظرات

ARROW 11 سال پیش
دستت طلا داداش .الان روش کار میکنم ببینم میتونم درستش کنم .واقعا ممنون از توضیحاتتون.
ARROW 11 سال پیش
سلام نتونستم کاری انجام بدم چون قسمت دسته بندی ها و محصولات بصورت html رو قالب نیست ! فکر میکنم خیلی کار پیچیده است.پیشاپیش منتظر راهنمایی دوستان هستم
ARROW 11 سال پیش
با inspect elemnt موزیلا هم نگا کردم روی فایل جی کوئری نوشته شده بصورت عبارات شرطی !
Mr Mehdi 11 سال پیش
چه ربطی داره :| منظورت چیه که رو قالب نیست؟ اگه منظورت اینه که بصورت فایل جدا وارد می کنی که هیچ فرقی نداره همون روش قبلی هست
Mr Mehdi 11 سال پیش
چه ربطی داره :| منظورت چیه که رو قالب نیست؟ اگه منظورت اینه که بصورت فایل جدا وارد می کنی که هیچ فرقی نداره همون روش قبلی هست
ARROW 11 سال پیش
اسکریپته فروش محصولات مجازیه و دسته بندی ها محصولات تعدادش مشخص نیست بخاطر این با استفاده از جی کوئری فکر میکنم نوشتن که با استفاده از مدیریت پنل قابل اضافه کردن یا حذف کردن باشه .آدرس رو براتون خصوصی کردم
Mr Mehdi 11 سال پیش
این که اصلا راه برای اسکرول کردن نداره :|
Mr Mehdi 11 سال پیش
می تونید برای کلاس col-md-2 یه متد onclick تعریف کنید که بعدش اسکرول بشه به جایی که میخواید. یه راه دیگه و آسونتر هم هست که میتونید هر کلاس col-md-2 رو توی یه تگ a بندازید و یه آیدی برای قسمت مقصد درست کنید که بره به اونجا.
ARROW 11 سال پیش
من این کلاس رو نتونستم پیدا کنم از کجا میان تو فایلشم نیست :|
Mr Mehdi 11 سال پیش
توی Inspect Element بود. بنظر من کلا کار مسخره ای هست که بخوای اینطوری اسکرول ایجاد کنی. چون کلا همش 100 پیکسل باید اسکرول بشه. مگه اینکه بخوای قالب رو از پایه عوضش کنی
ARROW 11 سال پیش
نه ببین داش وقتی طرف با گوشی بیاد خرید کنه دیگه دچار سردرگم میشه که رو کدوم دسته کلیک کرده و کلا رو دسته کلیک کنه و بیاد رو محصولات ممکنه گیج کننده باشه .از طرفی هم میخوام چندتا دسته دیگه اضافه کنم که خرید کردن راحتتر بشه.
محسن موحد 11 سال پیش

توضیحات رضا پیری قدیم و Mr Mahdi درسته.
شما اگر میخواین همونجا نمایش بده با دستورات show یا fadein یا animate و ... میتونید اینکارو کنید. راه های مختلفی داره.
اما اگر میخواین مخفی نباشه و بعد از کلیک همون لحظه تولید بشه (که لازم نمیبینم) میتونید با استفاده از دستورات append و ... html مورد نظرو تولید و به صفحه اضافه کنید.

اما اگر میخواین اسکرول کنید به div خاصی در صفحه , کدهای نتایج این جستجو در گوگل کاملا گویا هست:

jquery scroll to div

نظرات

ARROW 11 سال پیش
مرسی دوست عزیز. میخوام اسکرول کنم به قسمتی از صفحه که این دستور این کارو میکنه window.scrollTo(x, y); حالا ی سوال دیگه .اگه بخوام در مدت زمانی معین یا بصورت فست یا اسلو انجام بشه ،چیکار باید بکنم؟
Mr Mehdi 11 سال پیش
تو این کدی که الان اینجا نوشتید x آیدی مقصد هست و y مدت زمان رسیدن
ARROW 11 سال پیش
درود ، این دستورو تست کردم ولی ایکس مقدار طول و y هم عرض از پنجره هست اینم هم مثال//www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_scrollto
Mr Mehdi 11 سال پیش
اوه آره اشتباه از من بود. این لینک رو بخون فک می کنم همون چیزی هست که می خوای. برای این چیزی که میخوای باید از animate استفاده کنی لینک
ARROW 11 سال پیش
پست اولی عالی بود ولی خیلی برای بنده نامفهومه! و همچنین پیچیده است . یه چیزی تقریبا مثل این سایت میخوام وقتی رو یه دسته کلیک میشه اسکرول میشه رو محصولات خیلی زیبا طراحی شده www.giftiha.com
Spirit 11 سال پیش
اینم شاید براتون جالب باشه رو GitHub هست > لینک
پاسخگویی و مشاهده پاسخ های این سوال تنها برای اعضای ویژه سایت امکان پذیر است .
چنانچه تمایل دارید به همه بخش ها دسترسی داشته باشید میتوانید از این بخش لایسنس این آموزش را خریداری نمایید .