القائمة الرئيسية

الصفحات

كيفية عمل زر الصعود والذهاب لأسفل على المدونة


كيفية عمل زر الصعود والذهاب لأسفل على المدونة


هذه المرة سوف يشارك شدو تك في نصائح حول كيفية عمل زر الصعود والذهاب لأسفل على المدونة . ما هي أزرار الانتقال لأعلى ولأسفل؟ أزرار 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>



reaction:

تعليقات