آموزش لینک های لنگر  Bookmark در HTML5
نویسنده : محمدرضا خوشبین
دسته بندی : آموزش ها
امتیاز دهید : +3
 

آموزش لینک های لنگر  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);
	return false;
	});
	});
	</script>
	
 

برای انجام اسکرول نرم کافیست کد را در فایل html خود وارد نمایید . ( قبل از بسته شدن تگ <body/> مناسب تر میباشد .

نکته بسیار مهم : این کد به صورت جی کوئری می باشد . پس حتما باید کتابخانه جی کوئری بر روی وب سایت شما نصب باشد .



تگ مطلب : html5, آموزش html5, آموزش لینک های لنگر, آموزش Bookmark, Bookmark
کانال تلگرام تیک آنلاین : اطلاع از آخرین اخبار و هر آنچه یک وبمستر نیاز دارد ...جهت عضویت رو لینک کلیک کنید عضویت در کانال
telegram

موضوعات سایت

آمار سایت


  • کاربران عضو : ( 0 )
  • کاربران مهمان : ( 17 )
  • ربات ها : ( 1 )
  • مجموع آنلاین ها: ( 18 )

بازدید امروز :
3680
بازدید دیروز :
8520

دیگر سایت های ما