View Full Version : سوال: ساخت نمایش دکمه حرکت رو به بالا وقتی که نوار اسکرول تکون میخوره
khanlo.javid
دوشنبه 01 اسفند 1390, 13:37 عصر
سلام دوستان من یه کدی میخوام که وقتی اسکرولم توسایت حرکت کرد رو به پایین دکمه بالا نمایش داده شده.
buggen
دوشنبه 01 اسفند 1390, 16:36 عصر
سلام
این سمپل رو ببیند فقط اینو هم بگم که از jquery استفاده شده
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Go Top</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
});
});
</script>
</head>
<body>
<a name="top"></a>
<!--dummy data-->
Test</br></br></br></br></br></br>Test2</br></br></br></br></br></br>Test3</br></br></br></br></br></br>Test4</br></br></br></br></br></br>Test5</br></br></br></br></br></br>Test6</br></br></br></br></br></br>Test8</br></br></br></br></br></br>Test7</br></br></br></br></br></br>
<!--end dummy data-->
<div id="toTop" onclick="$(this).scrollTop()" style="position:fixed;bottom:0;display:none;background:bl ack;"><a style="color:white;font-size:20px;" href="#top">Go top</a></div>
</body>
</html>
موفق باشید
khanlo.javid
دوشنبه 01 اسفند 1390, 16:51 عصر
سلام دوست عزیز دستت درد نکنه برم تستش کنم بازم مرسی.
khanlo.javid
پنج شنبه 04 اسفند 1390, 11:32 صبح
سلام
اگه بخوام این کدو طوری تغییر بدم که وقتی اسکرول چند سانت اومد پایین و تا نزدیکی های وسط صفحه رسید این پیغام نمایش داده شه باید چیکار کنم.
با تشکر.
buggen
جمعه 05 اسفند 1390, 01:13 صبح
به شرط زیر نگاه کنید و تستش کنید
if ($(this).scrollTop() >= 300) {
$('#toTop').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
کد بالا یعنی وقتی 300px پایین اومد این اتفاق بیفته
khanlo.javid
شنبه 06 اسفند 1390, 16:29 عصر
سلام buggen عزیز
دستت درد نکنه کارت حرف نداره
مرسی
khanlo.javid
دوشنبه 08 اسفند 1390, 13:24 عصر
سلام
این شرطو تو هرجای صفحم که خواستم میتونم بزارم.
buggen
دوشنبه 08 اسفند 1390, 17:53 عصر
توی document.ready هست فقط باید تغییرش بدید
کد زیر رو جایگزین کنید
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop() >= 300 ) {
$('#toTop').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
});
});
khanlo.javid
دوشنبه 08 اسفند 1390, 18:55 عصر
سلام
یعنی تو document.ready بدنه (body)سایتم بنویسم.
buggen
دوشنبه 08 اسفند 1390, 19:50 عصر
توی تگ اسکریپ توی head
این سمپل کامل هست
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Go Top</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function() {
if ($(this).scrollTop() >= 300) {
$('#toTop').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
});
});
</script>
</head>
<body>
<a name="top"></a>
<!--dummy data-->
Test</br></br></br></br></br></br>Test2</br></br></br></br></br></br>Test3</br></br></br></br></br></br>Test4</br></br></br></br></br></br>Test5</br></br></br></br></br></br>Test6</br></br></br></br></br></br>Test8</br></br></br></br></br></br>Test7</br></br></br></br></br></br>
<!--end dummy data-->
<div id="toTop" onclick="$(this).scrollTop()" style="position:fixed;bottom:0;display:none;background:bl ack;"><a style="color:white;font-size:20px;" href="#top">Go top</a></div>
</body>
</html>
khanlo.javid
دوشنبه 08 اسفند 1390, 20:42 عصر
باز هم ممنون از لطفت
موفق باشی
vBulletin® v4.2.5, Copyright ©2000-1403, Jelsoft Enterprises Ltd.