آموزش لینک های لنگر Bookmark در HTML5

چندی پیش دوستی سوالی از من پرسید درباره لینک های لنگر Bookmark

این مدل لینک دهی در سایت wikipedia به وفور یافت میشود و به این معنا میباشد که شاید شما بخواهید کاربر پس از ورود به صفحه ی مورد نظر خود , به نقطه ای مشخص از آن صفحه برود . مثلا فرض کنید در یک تگ h1 در وب سایت خود دارید که میخواهید کاربر پس از کلیک بر روی لینک شما , به همان تگ h1 پرش کند . برای این کار باید مراحل زیر را انجام دهید .

1 – به تگ h1 خود خاصیتی به نام id بدهید و نامی دلخواه برای آن انتخاب نمایید .

2 – پس از اتمام آدرس دهی به خاصیت href , همان نامی که به id داده بودید را با یک # در قبل از آن در آدرس وارد نمایید .

به عنوان مثال :

<a href="#tickonline">تیک آنلاین</a>
         
        <h1 id="tickonline">بزرگترین منبع قالب های رایگان در ایران</h1>

نکته 1 : به جای h1 , هر تگ دیگری میتوان استفاده نمود. چون خاصیت id قابل فهم برای تمامی تگ های html می باشد .

نکته 2 : طبیعاتا تگی که به آن id میدهیم باید چندین سطر پایین تر و یا بالاتر از تگ a باشد تا پس از کلیک بر روی تگ a , عمل پرش صورت گیرد .

<script>
        $(document).ready(function(e) {
        $("a[href*='#']").click(function(){
        $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        retu false;
        });
        });
        </script>