saeed450 48 ارسال شده در مهر 95 گزارش بازنشر ارسال شده در مهر 95 سلام . افزونه scroll back to top رو نصب کردم . اما چرا دکمه ای به سایتم اضافه نشده برای بازگشت به بالای صفحه ؟! نقل قول لینک به ارسال
SM-Mahdavi 5427 ارسال شده در مهر 95 گزارش بازنشر ارسال شده در مهر 95 سلام از کدی که داخل صفحه زیر معرفی شده استفاده کنید ساده تره https://codyhouse.co/gem/back-to-top/ 1 نقل قول لینک به ارسال
saeed450 48 ارسال شده در مهر 95 مالک گزارش بازنشر ارسال شده در مهر 95 در 7 ساعت قبل، SM-Mahdavi گفته است : سلام از کدی که داخل صفحه زیر معرفی شده استفاده کنید ساده تره https://codyhouse.co/gem/back-to-top/ <body> <!-- all your content here --> <a href="#0" class="cd-top">Top</a> <!-- link to scripts here --> </body> cd-top.cd-is-visible { /* the button becomes visible */ visibility: visible; opacity: 1; } .cd-top.cd-fade-out { /* if the user keeps scrolling down, the button is out of focus and becomes less visible */ opacity: .5; } //browser window scroll (in pixels) after which the "back to top" link is shown var offset = 300, //browser window scroll (in pixels) after which the "back to top" link opacity is reduced offset_opacity = 1200, //duration of the top scrolling animation (in ms) scroll_top_duration = 700; خب هر کدوم از این کدا رو باید تو کدوم قسمت پوسته بزارم ؟! نقل قول لینک به ارسال
alitna 34 ارسال شده در مهر 95 گزارش بازنشر ارسال شده در مهر 95 سلام اول از همه یه کپی از قالبتون بگیرید تا داشته باشین و در صورت بروز مشکل اونو قرار بدین .. حالا به فایل header.php رفته و کد head/ رو پیدا کنین </head> قبل از این ، این کد رو قرار بدین : <script type="text/javascript"> $(function(){ $("#goarrowtopsite").click(function(){ $('body,html').animate({scrollTop:0},800); }); }); $(window).scroll(function(){ if($(this).scrollTop()>50){ $("#goarrowtopsite").fadeIn(150); }else{ $("#goarrowtopsite").fadeOut(150); } }); </script> حالا بعد از کد body : <body> این کد رو قرار بدین : <div id="goarrowtopsite"></div> و داخل فایل استایلهاتون ، یعنی فایل style.css تو یک خط جدید ، این کدهای استایل رو قرار بدین : #goarrowtopsite { background: #ed485c; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; bottom: 10px; color: #fff; cursor: pointer; display: none; font-size: 1.3em; height: 50px; position: fixed; right: 10px; width: 50px; z-index: 100; } #goarrowtopsite:before { border-bottom: 6px solid #fff; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); content: " "; left: 18px; position: absolute; top: 21px; } #goarrowtopsite:hover { background: #fd586c; } 1 نقل قول لینک به ارسال
saeed450 48 ارسال شده در مهر 95 مالک گزارش بازنشر ارسال شده در مهر 95 در در 10/13/2016 at 01:47، alitna گفته است : سلام اول از همه یه کپی از قالبتون بگیرید تا داشته باشین و در صورت بروز مشکل اونو قرار بدین .. حالا به فایل header.php رفته و کد head/ رو پیدا کنین </head> قبل از این ، این کد رو قرار بدین : <script type="text/javascript"> $(function(){ $("#goarrowtopsite").click(function(){ $('body,html').animate({scrollTop:0},800); }); }); $(window).scroll(function(){ if($(this).scrollTop()>50){ $("#goarrowtopsite").fadeIn(150); }else{ $("#goarrowtopsite").fadeOut(150); } }); </script> حالا بعد از کد body : <body> این کد رو قرار بدین : <div id="goarrowtopsite"></div> و داخل فایل استایلهاتون ، یعنی فایل style.css تو یک خط جدید ، این کدهای استایل رو قرار بدین : #goarrowtopsite { background: #ed485c; border-radius: 4px; -o-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; bottom: 10px; color: #fff; cursor: pointer; display: none; font-size: 1.3em; height: 50px; position: fixed; right: 10px; width: 50px; z-index: 100; } #goarrowtopsite:before { border-bottom: 6px solid #fff; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); content: " "; left: 18px; position: absolute; top: 21px; } #goarrowtopsite:hover { background: #fd586c; } ممنون از توضیح جامع و کامل شما نقل قول لینک به ارسال
پست های پیشنهاد شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .