مدونة هلا تك

فائدة زر الصعود والهبوط الديناميكي في قوالب بلوجر

عند تصفح أي موقع أو مدونة تحتوي على مقالات طويلة أو صفحات مليئة بالمحتوى، غالباً ما يواجه الزائر صعوبة في التنقل بين بداية الصفحة ونهايتها. وهنا تأتي أهمية إضافة زر الصعود للأعلى والهبوط للأسفل الديناميكي، والذي يُعد من العناصر الجمالية والوظيفية المهمة في أي قالب بلوجر احترافي.

في هذا الموضوع اقدم لكم زر ديناميكي يجمع بين الصعود للاعلى و الهبوط للاسفل بزر واحد فقط
مزايا زر الصعود والهبوط الديناميكي:
سهولة التصفح: يساعد الزائر على الانتقال مباشرة إلى أعلى أو أسفل الصفحة بضغطة زر واحدة، دون الحاجة إلى التمرير اليدوي الطويل.

تجربة مستخدم أفضل: الزر الديناميكي يتغير تلقائياً حسب مكان المستخدم داخل الصفحة؛ فإذا كان الزائر في الأسفل يظهر زر الصعود للأعلى، وإذا كان في الأعلى يتحول الزر تلقائياً إلى زر النزول للأسفل.
توفير الوقت والجهد: بدلاً من التمرير المستمر خصوصاً في المقالات الطويلة، يستطيع الزائر التنقل بسرعة وسلاسة.
تحسين مظهر القالب: إضافة مثل هذا الزر تمنح القالب مظهراً عصرياً أكثر احترافية، وتعكس اهتمام المدون براحة متابعيه.
ملاءمة مع مختلف الأجهزة: سواء كان الزائر يستخدم الهاتف أو الحاسوب، فإن زر الصعود والهبوط الديناميكي يوفر له نفس السهولة والمرونة.

أهمية إضافته في قوالب بلوجر:

يجعل المدونة أكثر جاذبية وسهلة الاستخدام.
يساهم في زيادة مدة بقاء الزائر داخل الموقع لأن التنقل يصبح مريحاً.
يقلل من معدل الارتداد (Bounce Rate) لأن القارئ يجد ما يحتاجه بسهولة دون إزعاج.
يُعتبر من المميزات الحديثة التي أصبحت ضرورية في القوالب المتجاوبة.

في النهاية، يمكن القول إن زر الصعود للأعلى والنزول للأسفل الديناميكي ليس مجرد أداة صغيرة، بل هو عنصر مهم يحسن من تجربة المستخدم ويزيد من جاذبية المدونة ويجعلها أكثر توافقاً مع توقعات الزوار.

شرح تركيب الزر بقالب بلوجر

الأكواد الخاصة بالأضافة

نبحث عن ~~</head>~~ و نلصق الكود التالي أعلاه

<style>
.dcfftg {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
cursor: pointer;
opacity: 1;
transition: opacity 0.3s;
}
.freddgh {
width: 50px;
height: 50px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.freddgh svg:first-child {
position: absolute;
width: 50px;
height: 50px;
}
.scroolbround {
fill: none;
stroke: #ccc;
stroke-width: 2.5;
}
.scrolbprogres {
fill: none;
stroke: #0d6efd;
stroke-width: 2.5;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.freddgh .scroolbround {
fill: #fff;
stroke: #ccc;
stroke-width: 2px;
}
.arrow-icon {
width: 15px;
height: 15px;
transform: rotate(0deg);
transition: transform 0.8s ease;
position: relative;
z-index: 1; margin-left: 14px;

}
</style>

ثم نبحث عن ~~<body>~~ و نلصق الكود التالي أسفله

<div class="dcfftg">
<div class="freddgh" id="scrollToTopBtn">
<svg>
<circle class="scroolbround" cx="25" cy="25" r="20" />
<circle class="scrolbprogres" cx="25" cy="25" r="20" stroke-dasharray="126" stroke-dashoffset="126" />
</svg>
<svg class="arrow-icon" fill="#2a6efa" height="20px" viewBox="0 0 330 330" width="20px" xmlns="http://www.w3.org/2000/svg">
<path d="M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z"/>
</svg>
</div>
</div>

و أخيرا نبحث عن ~~</body>~~ و نلصق الكود التالي أعلاه

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function () {
const freddghtn = document.querySelector(".dcfftg");
const progressBar = document.querySelector(".scrolbprogres");
const triggerBtn = document.getElementById("scrollToTopBtn");
const arrowIcon = document.querySelector(".arrow-icon");
const radius = 20;
const circumference = 2 * Math.PI * radius;
let isAtTop = false;

freddghtn.classList.add("visible");

progressBar.style.strokeDasharray = `${circumference}`;
progressBar.style.strokeDashoffset = `${circumference}`;

function toggleScroll() {
if (isAtTop) {
window.scrollTo({
top: document.body.scrollHeight,
behavior: "smooth"
});
arrowIcon.style.transform = "rotate(0deg)";
} else {
window.scrollTo({
top: 0,
behavior: "smooth"
});
arrowIcon.style.transform = "rotate(180deg)";
}
isAtTop = !isAtTop;
}

function updateProgressBar() {
const scrollTop = window.scrollY || document.documentElement.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const progress = scrollTop / scrollHeight;
const offset = circumference * (1 - progress);
progressBar.style.strokeDashoffset = offset;

if (scrollTop === 0) {
isAtTop = true;
arrowIcon.style.transform = "rotate(180deg)";
} else if (scrollTop + window.innerHeight >= document.documentElement.scrollHeight - 10) {
isAtTop = false;
arrowIcon.style.transform = "rotate(0deg)";
}
}

function handleScroll() {
updateProgressBar();
}

triggerBtn.addEventListener("click", toggleScroll);
window.addEventListener("scroll", handleScroll, { passive: true });
window.addEventListener("resize", updateProgressBar);
updateProgressBar();
});
//]]>
</script>