آموزش زبان HTML (جلسه ۲۸)

طراحی دکمه برو به بالا در صفحات اچ تی ام ال (html)

شاید بسیاری از سایت ها را دیده باشیم که وقتی وارد صفحه ای می شویم که خیلی طولانی است، پایین صفحه دکمه ای طراحی کرده اند تحت عنوان “برو به بالا”. حال به نظر می رسد با دانستن روشی که پیش از این مورد بررسی قرار گرفت به راحتی بتوانیم چنین دکمه ای را طراحی کنیم. برای این منظور کد زیر را وارد ویرایشگر متن خود می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <title>asrefonon</title>
    </head>
     
    <body>
        <p>
            <p id="top">Top of the page</p>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <p>End</p>
            <p>
                <a href="#top">Go to top</a>
            </p>
    </body>
</html>

همانطور که در کد فوق می بینیم ابتدا پاراگرافی حاوی عبارت Top of the page ایجاد کرده و id آن را برابر با top قرار داده ایم. سپس در پایین صفحه پارگرافی حاوای عبارت Go to top ایجاد کرده و آن را داخل تگ های <a></a> قرار داده ایم. مقداری که برای href در نظر گرفته ایم برابر است با #top به طوریکه پس از کلیک روی این عبارت به بالای صفحه خواهیم رفت:

لینک_دادن_به_بالای_صفحه_در_اچ_تی_ام_ال

با کلیک روی گزینه Go to top می بینیم که به بالای صفحه ارجاع داده می شویم.

لینک_دادن_به_بالای_صفحه_در_اچ_تی_ام_ال2

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)

پیشنهاد لحظه ای
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

توسط
تومان