آموزش افزودن اسکرول به بالا به همراه نوار پیشرفت

[CHRIS-7 1009]

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

ابتدا کد زیر را در مسیر قالب Global Template واقع در پنل مدیریت > شخصی سازی > پوسته ها > قالب موردنظر نماد </> بعد از فوتر قرار داده و در عبارت yoursite.ir آدرس انجمن خودتون رو قرار بدید  ذخیره کنید

<script src="http://yoursite.ir/scroll.progress.bar.js"></script><div class="progress-wrap"><svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102"><path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/></svg></div>

سپس کد استایل زیر را هم در قالب Custom.css همان جا در تب CSS قرار داده و ذخیره کنید

.progress-wrap{position:fixed;right:10px;bottom:10px;height:46px;width:46px;cursor:pointer;display:block;border-radius:50px;box-shadow:inset 0 0 0 2px rgba(255,255,255,0.2);z-index:10000;opacity:0;visibility:hidden;transform:translateY(15px);-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap.active-progress{opacity:1;visibility:visible;transform:translateY(0)}.progress-wrap::after{position:absolute;font-family:"FontAwesome";content:"\f102";text-align:center;line-height:46px;font-size:32px;color:#d60000;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:999;-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap:hover::after{opacity:0}.progress-wrap::before{position:absolute;font-family:"FontAwesome";content:"\f102";text-align:center;line-height:44px;font-size:38px;opacity:0;color:red;left:0;top:0;height:46px;width:46px;cursor:pointer;display:block;z-index:999;-webkit-transition:all 200ms linear;transition:all 200ms linear}.progress-wrap:hover::before{opacity:1}.progress-wrap svg path{fill:none}.progress-wrap svg.progress-circle path{stroke:red;stroke-width:4;box-sizing:border-box;-webkit-transition:all 200ms linear;transition:all 200ms linear}

در آخر هم فایل جی کوئری اون می مونه که در فایل پیوست شده رو دانلود کرده و در روت انجمن (از طریق سی پنل هاست > فایل منیجر ) آپلود کنید.

نکته : اگر عمل نکرد یا یک جایی از کار را اشتباه رفته اید یا کتابخانه jquery رو ندارید و اونو هم دانلود کنید و لینکش رو در قالب Gobal Template به صورت <script src=""></script> اضافه کنید

scroll.progress.bar.js

 

ویرایش شده 13 فروردین، ۱۳۹۹ توسط CHRIS-7

[Arash.Ranjbar 11]

سلام دوست عزیز

من تا آخرش پیش رفتم ولی کار نکرد.

حالا دوتا سوال دارم:

1. تگ اولی رو بعد از تگ شروع فوتر قرار بدیم یا بعد از تگ پایان فوتر؟

2. : این کتابخانه jquery رو از کجا اضافه کنم؟

حل شد دمت گرم

سلام @CHRIS-7

آقا شرمنده هی مزاحم شما میشیم. من دیروز که طبق این آموزشتون پیش رفتم همه چی اوکی شد و خوب هم کار میکنه. فقط یه موردی که هست تو صفحه اصلی انجمن برخی چیزا درست کار نمیکنه.

تصویر زیر رو ببینیذ:

جاهایی که علامت زدم اصلا باز نمیشن ولی بعد از حذف کدها درست شدن. حالا اینا چیزایی بودن که من دیدم. نمیخوام بگم که مشکل از کدهای شماست شاید من مسیر رو درست پیش نرفتم. اگه امکانش هست یه تستی بکنین مارو هم در جریان بزارین

با تشکر صمیمانه

[CHRIS-7 1009]

یه جای کارو اشتباه رفتید که باعث تداخل کدهای جی کوئری شده ، کد مربوطه رو بعد از تگ فوتر <footer/> قالب global template قرار بدید و تست کنید.

[Arash.Ranjbar 11]

بعد از تگ فوتر هم قرار دادم کار نکرد که هیچ بازم مثل تصویر ارسالی اون قسمتها کار نمیکنه.

[CHRIS-7 1009]

در 11 دقیقه قبل، Arash.Ranjbar گفته است :

بعد از تگ فوتر هم قرار دادم کار نکرد که هیچ بازم مثل تصویر ارسالی اون قسمتها کار نمیکنه.

نکته آخر رو هم که آخرش گفتم رو انجام دادید ؟!!!

[Arash.Ranjbar 11]

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

اینم بگما کار میکنه فقط اون قسمتها که تو تصویر مشخص کردم از کار میفتن

[CHRIS-7 1009]

در ۱ ساعت قبل، Arash.Ranjbar گفته است :

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

اینم بگما کار میکنه فقط اون قسمتها که تو تصویر مشخص کردم از کار میفتن

اگه واقعا نیاز دارید یک یوز با دسترسی بسازید و بفرستید براتون اوکی کنم !

[CHRIS-7 1009]

اوه بله ، آموزشی که دادم توسط یک ایرانی که اسم نمی برم اما شاید مدیران و کاربران بشناسند کپی شده و در قالب فایل نصبی افزونه در مارکت اصلی IPS فروخته میشه ! البته جا داره این مورد رو هم اضافه کنم که پستشون ریپورت شد 🙃

[صائب کوهپایه 2592]

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