كيفية عمل زر الصعود والذهاب لأسفل على المدونة
هذه المرة سوف يشارك شدو تك في نصائح حول كيفية عمل زر الصعود والذهاب لأسفل على المدونة . ما هي أزرار الانتقال لأعلى ولأسفل؟ أزرار Go Up و Go Down عبارة عن أزرار تعمل في كلا الاتجاهين للقفز لأعلى ولأسفل بسهولة وبسرعة ، بدلاً من تحريكها بالماوس. هذه طريقة واحدة لتشجيع المستخدمين على تصفح المزيد من المحتويات الأخرى بسهولة. يلعب
زري Go Up و Go Down دورًا مهمًا جدًا للموقع ذي المحتوى الذي يحتوي على صفحات طويلة. بالنسبة للمواقع التي تحتوي على الكثير من المعلومات على صفحاتها ، فإنها ستجعل المحتوى الآخر يمر دون أن يلاحظه أحد من خلال التمرير بعيدًا عن الصفحة.
حسنًا ، بالنسبة لأولئك الذين يريدون تثبيته ، يرجى اتباع الخطوات التالية
طريقة التركيب
توجة الي المظهر ثم تحرير HTML وقم بالبحث عن /head وضع الكود فوقة الي قبلة.
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
توجة الي المظهر ثم تحرير HTML وقم بالبحث عن /head وضع الكود فوقة الي قبلة.
الاصدار الاول
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>
الاصدار الثانى
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>
يكفى وضع اصدار واحد
توجة الي المظهر ثم تحرير HTML وقم بالبحث عن /body وضع الكود فوقة الي قبلة.
<ul id='scrollToTop'>
<li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
<li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>
توجة الي المظهر ثم تحرير HTML وقم بالبحث عن /body وضع الكود فوقة الي قبلة.
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>
تعليقات
إرسال تعليق