سلام وقت بخیر
چیزی که میخواین فقط با HTML ساخته نمیشه. یکم CSS و البته جاوا اسکریپت نیازه.
توی این طرح من کد HTML و CSS رو به صورت درون خطی اضافه کردم که خودتون باید کد استایل رو به فایل مجزا انتقال بدید
<p class="d-inline-block border rounded-pil py-1 px-4" style="
position: relative;max-width: 550px;
min-height: 52px;margin: 0 auto;
display: flex !important;
justify-content: center;
align-items: center;
">
<span id="scroll-up" style="position: absolute;right: 6px;"><img src="up.png"></span>
متن اصلی سربرگ
<span id="scroll-down" style="position: absolute;left: 6px;"><img src="down.png"></span>
</p>
و این جاوا اسکریپت هم باید استفاده کنید:
document.getElementById("scroll-up").addEventListener("click", function() {
window.scrollBy({
top: -window.innerHeight,
behavior: "smooth"
});
});
document.getElementById("scroll-down").addEventListener("click", function() {
window.scrollBy({
top: window.innerHeight,
behavior: "smooth"
});
});
فایل ادیت شده پیوست شد: