حرکت در صفحه [بایگانی]

olampiad

دوشنبه 13 آبان 1392, 18:54 عصر

سلام
من تو یه جایی یه کدی دیده بودم، موقعی که روی لینک کلیک می کرد به طور روان به سمت متن و دایو مورد نظر حرکت می کرد
مثل این سایت بود
http://www.parsiangroup.com/
ولی الآن شبیه اون رو می نویسم کار نمی کنه.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function nav1(){
window.scroll(0,window.pageYOffset+1)
if(document.getElementById('neda').offsetTop){
window.pageYOffset+1;
}
}
</script>
<style type="text/css">
#hamid{
width:100px;
height:100px;
margin:auto;
background:#CC0;
}
</style>
</head>
<body>
<a href="javascript:nav1()">hamid</a>
 
<div id="neda">
</div>
</body>
</html>

مشکل از کجاست
بی نهایت ممنون

Javidhb

سه شنبه 14 آبان 1392, 12:05 عصر

<a href="javascript:nav1('neda')" onclick="">hamid</a>
 
 
 
<div id="neda">
test
</div>

<script type="text/javascript">
function nav1(targetId, pace = 15, time = 20){

var targetY = document.getElementById(targetId).offsetTop; //مقصد
var currentY = window.pageYOffset; //مکان فعلی
var pace = pace; //مقدار جهش اسکرول در هر مرحله

//اسکرول به محل مورد نظر
var myInterval = setInterval(function(){
if(currentY <= targetY) window.scrollTo(0, currentY += pace);
else clearInterval(myInterval);
}, time);
}

</script>

برای اینجور کارا بهتره از jquery استفاده کنید.

این کد فقط برای اسکرول از بالا به پایین کار میکنه... برای اسکرول از پایین به بالا کافیه یه شرط بزاریدو جهت حرکت رو عوض کنید (منفی کنید)

حتما این لیک رو ببینید. (http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript)

olampiad

سه شنبه 28 آبان 1392, 19:55 عصر

سلام
تشکر فراوان بابت پاسخ ها
من کد رو به این صورت نوشتم.
چه طور می تونم این مشکل رو حل کنم.
بی نهایت ممنون

computer.onclick=function(){
var targetY = document.getElementById('computer').offsetTop; //مقصد
var currentY = window.pageYOffset; //مکان فعلی
var pace = 15; //مقدار جهش اسکرول در هر مرحله

//اسکرول به محل مورد نظر
var com = setInterval(function(){
if(currentY <= targetY) {window.scrollTo(0, currentY += pace);}
else {clearInterval(myInterval);}
},10);

var myIntervall = setInterval(function(){
if(currentY > targetY) {window.scrollTo(0, currentY -= pace);}
else {clearInterval(myIntervall);}
},10);
return false;
}

اولین setInterval به خوبی کار می کنه.
دومین setInterval هم کار می کنه اما :
موقعی که اسکرول رفت و وایساد روی دایو دیگه گیر می منه
یعنی دیگه نمی تونم اسکرول رو تکون بدم.ه
چ
بی نهایت ممنون

Javidhb

سه شنبه 28 آبان 1392, 21:00 عصر

از چه ادیتوری برای کدنویسی استفاده میکنی؟

دوتا ایراد داری:
1. 'computer' هم id لینک هست هم "مقصد" اسکرول.
2. interval اول رو با اسم 'com' مشخص کردی اما موقع از بین بردنش توی clearInterval از 'myInterval' (که باعث میشه اسکرول برای مدت بینهایت به سمت "مقصد" حرکت کنه... یا بعبارت دیگه نزاره شما اسکرول کنید)

/*
|computer1 => link -> برای صدا زدن تابع
|
|computer2 => div -> مقصد اسکرول
*/
var computer1 = document.getElementById('computer1');

computer1.onclick=function(){
var targetY = document.getElementById('computer2').offsetTop; //مقصد
var currentY = window.pageYOffset; //مکان فعلی
var pace = 15; //مقدار جهش اسکرول در هر مرحله

//اسکرول به محل مورد نظر
var com = setInterval(function(){
if(currentY <= targetY) {window.scrollTo(0, currentY += pace);}
else {clearInterval(com);} //com نه myInterval
},10);

var myIntervall = setInterval(function(){
if(currentY > targetY) {window.scrollTo(0, currentY -= pace);}
else {clearInterval(myIntervall);}
},10);
return false;
}

olampiad

سه شنبه 28 آبان 1392, 22:26 عصر

از adobe dream wever استفاده می کنم
از چه ویرایشگری استفاده می کنم.