الرجوع إلى بداية الصفحة وذلك عند تمرير زر الـscroll إلى الأدنى
<!DOCTYPE html>
<html>
<head lang="en-US">
<meta charset="utf-8" />
<title></title>
<style>
#content {height: 140em;}
</style>
<script>
$(document).ready(function(){
$('#back_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, "fast");
return false;
});
});
</script>
</head>
<body>
<div id="header">
Nasılsın ,,, Sadece JQUERY ekle.. sonra ↓↓↓
</div>
<div id="content">
</div>
<div id="footer">
<a href="#" id="back_top">Back to the top</a>
</div>
</body>
</html>
في هذه الحالة نصل إلى زر الرجوع إلى اعلى الصفحة عند التمرير إلى آخر الصفحة
ولكن هذه الطريقة غير عملية .. لذلك سنجعل زر العودة إلى الأعلى ثابت مع التمرير
#back_top {position: fixed;bottom: 5em;}
في المثال التالي تم تغيير العنصر posion
<!DOCTYPE html>
<html>
<head lang="en-US">
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta content=", , , , , , , " name="keywords" />
<link type="text/css" rel="stylesheet" href="../css/style.css" media="all" />
<style>
#content {height: 140em;}
#back_top {position: fixed;bottom: 5em;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#back_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
Ikinci Nasılsın ,,, Sadece JQUERY ekle ve yeni style #back_top için FIXED .. sonra ↓↓↓
</div>
<div id="content">
Kolayme?
</div>
<div id="footer">
<a href="#" id="back_top">Başa Dön</a>
</div>
</div>
</body>
</html>
تظهر هنا مشكلة جديدة وهي بقاء زر العودة إلى الأعلى ثابتا حتى وإن كان المؤشر في أعلى الصفحة
لذلك يمكن إضافة جزء يحدد مقدار التمرير الذي بعده يبدا عمل التابع وظهور زر العودة
$(window).scroll(function(){
var izzet = $('#back_top'),
scroll = $(window).scrollTop();
if (scroll > 100) izzet.addClass('back_top');
else izzet.removeClass('back_top');
});
يبدأ ظهور زر العودة إلى الأعلى بعد تمرير مقداره أكبر من 100
<!DOCTYPE html>
<html>
<head lang="en-US">
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta content=", , , , , , , " name="keywords" />
<link type="text/css" rel="stylesheet" href="../css/style.css" media="all" />
<style>
#content {height: 140em;}
#back_top {}
.back_top {position: fixed;bottom: 5em;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(window).scroll(function(){
var izzet = $('#back_top'),
scroll = $(window).scrollTop();
if (scroll > 100) izzet.addClass('back_top');
else izzet.removeClass('back_top');
});
$(document).ready(function(){
$('#back_top').click(function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
</script>
</head>
<body>
<div id="main">
<div id="header">
Ikinci Nasılsın ,,, Sadece JQUERY ekle ve yeni style #back_top için FIXED .. sonra ↓↓↓
</div>
<div id="content">
It is hidden,, when you scroll down the link will appear and fixed in its place .. if you scroll up it will be hidden again.. <br />
Daha kolay... öyle mi?
</div>
<div id="footer">
<a href="#" id="back_top">Başa Dön</a>
</div>
</div>
</body>
</html>
