مبتدی: دکمه بالابر [بایگانی]

View Full Version : مبتدی: دکمه بالابر

++Hichkas

چهارشنبه 18 دی 1392, 18:00 عصر

سلام دوستان عزیز وقت همگی بخیر

من میخوام مثل خیلی از سایتها پایین صفحه یه دکمه بزارم که بتونه با کلیک روش از پایین صفحه بره بالا اما کدم جواب نمیده میشه بگین ایراد کارم کجاست
کدی که گذاشتم اینجوریه :

jQuery('#backtotop').onclick(function(){
$('html, body').animate({
top: 0
}, 1000);
});

و
<div id="backtotop" style="display: block;">Back to Top</div>

meisam3322

چهارشنبه 18 دی 1392, 18:52 عصر

فکر کنم توی این صفحه جواب سوال شما باشه (http://stackoverflow.com/questions/6677035/jquery-scroll-to-element)

jalil_gh

چهارشنبه 18 دی 1392, 20:12 عصر

به این صورت بنویسید. البته کد رو داخل document.ready بزارید.
jQuery('#backtotop').click(function(){
$('body').animate({
scrollTop: 0
}, 1000);
});

++Hichkas

چهارشنبه 18 دی 1392, 23:08 عصر

سلام ممنون از شما که جوابم رو دادین
اما جواب نداد
نمیدونم چشه البته من آشنایی کمی با کدهای جاوا اسکریپت دارم تازه دارم یاد میگیرم بخاطر همین ایرادش رو نمیدونم :(

jalil_gh

چهارشنبه 18 دی 1392, 23:48 عصر

متوجه شدم که برای اینکه تو همه مرورگرها کار کنه شما باید هم از body و هم از html استفاده کنید.
اینطوری امتحان کردم الان تو فایرفاکس و کروم و اپرا کار می‌کنه. مرورگرهای دیگه رو خودتون امتحان کنید اگه کار نکرد بگید.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
height: 2000px;
position: relative;
}

#backtotop {
background-color: red;
width:50px;
height:50px;
position: fixed;
bottom: 10px;
right: 10px;
}
</style>
<script src="lib/jquery.js"></script>
<script>
$(document).ready(function() {
$('#backtotop').click(function(){
$('html, body').animate({
scrollTop: 0
}, 1000);
});
});
</script>
</head>
<body>
<div id="backtotop"></div>
</body>
</html>