آموزش های این وب سایت به صورت رایگان در دسترس است. اطلاعات بیشتر
بروز خطا
   [message]
اشتراک در سوال
رای ها
[dataList]

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

ARROW  11 سال پیش  11 سال پیش
+1 0

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

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

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

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

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

پاسخ به سوال 
Mr Mehdi  11 سال پیش
+2 0

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

قدم اول اینه که این کد 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>

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

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

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

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

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

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

jquery scroll to div

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