12
יולי
תגובות

קח אותי למעלה! מדריך ליצירת כפתור Up נגלל בעזרת HTML/jQuery

לא יודע אם שמתם לב, אבל אתמול הוספתי פיצ'ר נחמד לבלוג – כפתור Up (העיגול האדום עם החץ בחלק הדרום-מזרחי ימני-תחתון של הדף) שגולל אוטומטית את העמוד בו אתם נמצאים בחזרה לראשו (להלן הHeader) במהירויות שונות ביחס למיקומכם באותו העמוד. את הפיצ'ר התקנתי/בניתי בעזרת CSS, jQuery וHTML פשוט. אחרי שישנתי על זה לילה (לילה שבו חלמתי על כפתורי Up שלחיצה ממושכת עליהם גורמת לאוביקטים בחדר להתעופף – מה לעשות, זה מה שקורה אחרי צפייה באקסמן 3 בפעם ה14) החלטתי לחשוף אתכם – קוראי הבלוג, לסוד הקסם של ה"Scrollable Up Button".

המדריך ליצירת Scrollable Up Button (או כפתור Up נגלל) באתר בעזרת HTML/jQuery:

ה-HTML:

1
2
3
4
5
6
7

<a name="top"></a>
<a href="#top" id="top">
	<span style="color: #ff0000;">קח אותי למעלה!</span>
</a>

ה-JavaScript:

1
2
3
4
5
6
7
8
9
10
11

$(document).ready(function()   {
	$('a[href=#top]').click(function(){
		$('html,  body').animate({scrollTop:0}, 'slow');
		return false;
	});
});

חשוב: יש לשים לב לשורת ה"return false", היא זאת שנותנת את האנימציה. בלעדיה, הקישור פשוט יקפיץ את העמוד למעלה.

ה-CSS (למקרה ותרצו להכניס תמונה במקום טקסט, במיקום הימני-תחתון כמו בבלוג):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#top  {
	background: url(<span style="color: #ff0000;;">***.png</span>) no-repeat top  center;
	text-decoration:none;
	position:fixed;
	bottom:5px;
	right:7px;
	border:none;
	text-indent:-999px;
	height:40px;
	width:40px;
}

#top:hover {
	background: url(<span style="color: #ff0000;">***.png</span>)  no-repeat bottom center;
}

כדי להפוך את הקישור לכפתור/תמונה, פשוט הורידו את הטקסט מהHTML, ושנו את הURL (מסומן באדום) לכתובת הנכונה.

אם יש לכם שאלות, אשמח לענות!

13 תגובות לפוסט "קח אותי למעלה! מדריך ליצירת כפתור Up נגלל בעזרת HTML/jQuery"

כתיבת תגובה

האימייל שלך לא יוצג באתר. (*) שדות חובה מסומנים

*

תגי HTML מותרים: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>