آیا می دانستید سایت تیک آنلاین دارای 882 مطلب مفید و 108103 کاربر می باشد !

آموزش لینک های لنگر  Bookmark در HTML5
نویسنده : محمدرضا خوشبین
دسته بندی : آموزش ها
19 بهمن 1394
امتیاز دهید : +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 )
  • کاربران مهمان : ( 16 )
  • ربات ها : ( 1 )
  • مجموع آنلاین ها: ( 17 )

بازدید امروز :
8207
بازدید دیروز :
13059

تبلیغات متنی

طراحی سایت در کرج

www.Groupdesign.ir

ساندویچ پانل سقفی

www.sandwich-panelmammut.com

هات تپ صنعت

www.Hottapsanat.com

هات تپ ایران

www.Hottapiran.com

هات تپ

www.Hottapco.ir

هات تپ کاران

www.Hottapkaran.com

قیمت ساندویچ پانل

www.mammoth-panel.com

ساندویچ پانل

www.sandewichpanel.com

ساندویچ پنل ماموت

www.mammoth-panel.com