PDA

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 عصر
باز هم ممنون از لطفت


موفق باشی