راکت
حل شده

اسکرول خودکار بعد از رفرش شدن صفحه

13 پاسخ

درود دوستان
دیدیدن تو سایت ها، مثلا در یه قسمتی از مطلب هستید و دارید مطالعه میکنید...
بعد وقتی که رفرش میکنید صفحه رو دوباره میاد همون جا از مطلبی که مطالعه میکردید
چطور این کار انجام میشه؟؟

ثبت پرسش جدید

پاسخ‌ها

13
محمد رضا
محمد رضا
@salar.mohammad2013

تخصص: Full Stack Developer

بهترین پاسخ

سلام
شما میتونی صفحه خودت رو مثلا به چند قسمت با ایدی تقسیم کنی
منظورم بر اساس عناوین هست
مثلا من یه بخش از سایت ری اکت رو برات لینک کردم الان
شما اگر روی لینک بالا کلیک کنی میری به بخش updating the screen
چرا ؟ چون ته ادرس بار با # مشخص شده id همون بخش از سایت
شما میتونی یه رویداد scroll تعریف کنی توی فایل js خودت
هروقت کاربر رسید به بخش هایی که خودت مشخص کردی توی سایت بالای ادرس بار تغییر کنه
اینطوری هر بار که کاربر صفحه رفرش کنه میره همون عنوانی که داشته مطالعه میکرده
این کار باعث میشه خود شخص هم بتونه اون بخش از سایتت رو لینک بده به افراد دیگ

سید آرین سید مومن
سید آرین سید مومن
@arianseyed

تخصص: junior security researcher

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

البته مطمئن نیستم 🌹

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@arianseyed
باشه، ممنون از راهنمایی🙏

شاید پاسخ شما همین‌جا باشد

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@salar.mohammad2013
ممنون از راهنمایی 🤩🤩🤩

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@salar.mohammad2013
فقط چیکار کنم که هر وقت کاربر رسید به بخش هایی که خودم مشخص کردم ادرس بار تغییر کنه؟

vahid
vahid
@vahid1379

تخصص: توسعه دهنده وردپرس

window.history.pushState({}, "", "?sectionid=sec-20");

👆🏻
ست کردن ایدی در مرورگر از طریق کویری استرینگ

const url = new URL(location.href);
const sectionid = url.searchParams.get("sectionid");

👆🏻
گرفتن مقدار از کویری استرینگ

window.onload = function(){

const url = new URL(location.href);
const sectionid = url.searchParams.get("sectionid");

const element = document.getElementById(sectionid);

element.scrollIntoView();

} 

👆🏻
اتصال به رویداد onload و گرفتن مقدار sectionid و هدایت صفحه به المنت دارای آیدی sectionid با استفاده از scrollIntoView

good luck

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@ossvahid
Wow...
خیلی ممنون

vahid
vahid
@vahid1379

تخصص: توسعه دهنده وردپرس

const observer = new IntersectionObserver(function(entries,observer){
entries.foreach(function(entry){
if(entry.isIntersecting){
let elem = entry.target;
window.history.pushState({}, "", "?sectionid="+elem.getAttribute("id")); 
} 
})
},{
root: document.body, 
threshold: 0.7
 })
document.querySelectorAll("div.any").foreach(function(ELEMENT){
observer.observe(ELEMENT)
})

آپدیت کویری استرینگ از طریق رسیدن به المنت سطح حرفه ایی

vahid
vahid
@vahid1379

تخصص: توسعه دهنده وردپرس

قربانت 🤞🏻
اینا رو دستی با کیبورد گوشی تایپ کردم آگه یجایش ناخواسته اشتباه بود بگو کمکت کنم

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@ossvahid
دمت گرم داداش
فقط مشکل اینه زیاد سر در نیاوردم چون تازه جاوا اسکریپت رو شروع کردم...😅

vahid
vahid
@vahid1379

تخصص: توسعه دهنده وردپرس

عزیز جان اگه تازه جاوااسکریپت رو شروع کردی البته جسارت نباشه از چیزای کوچیک شروع کن من 4 سال پیش بود وقتی جاوااسکریپت رو شروع کردم درحد کلیک رو ی دکمه و نمایش alert بود اگه از الان بخای کارای پیچیده بکنی یادگیری js سخت هستش

مهدی
مهدی
@mehdi8686h

تخصص: توسعه دهنده فرانت اند

@ossvahid
نه جسارت چیه خواهش میکنم
بله درسته...
منم از چیزا کوچیک شروع کردم و دارم تمرین میکنم
ولی برام سوال شد که وقتی صفحه رو رفرش کردم چطور همونجایی برگرده که بودم، که دیدم نیاز به مهارت بالای js میخواد و نمیتونم فعلا سردر بیارم

محمد رضا
محمد رضا
@salar.mohammad2013

تخصص: Full Stack Developer

@ossvahid
با وحید جان موافقم
لزومی نداره خیلی چالش های سخت رو انجام بدی چون اپشن ضروری ای هم نیست که نبودش اشکالی داشته باشه
شما قطعه کد چیزی که میخوایی رو داری اما درکش نمیکنی خب این رو نمیشه دیگه هر بخشش رو تحلیل کرد باید راجب هر متدش جدا سرچ کنی ببینی کاراییش چیه

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام