026-32601

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

1 1 1 1 1 (2 Votes)

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

<!DOCTYPE html>
<html>
    
    <head>
        <title>Netshahr</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



Submit to FacebookSubmit to Google PlusSubmit to Twitter

نوشتن دیدگاه

نظراتی که به تعمیق بحث کمک می کند، در معرض ملاحظه و قضاوت دیگران قرار می گیرند. نظراتی که حاوی توهین، افترا و تهمت به دیگران باشد، منتشر نخواهد شد. لطفاً از نوشتن نظرات خود به صورت حروف لاتین (فینگلیش) خودداری نمایید.


تصویر امنیتی
تصویر امنیتی جدید

آخرین مطالب