classic-
دوشنبه 31 فروردین 1394, 00:38 صبح
با سلام و خسته نباشید٬
من یک صفحه متشکل از یک منو و سه div دارم٬ منو دارای سه لینک است که روی هر لینک کلیک بشه٬ یکی از اون سه div رو اسکرول می کنه به بالای صفحه. (به بالاترین قسمت صفحه٬ یعنی فاصله ش تا بالا صفر پیکسل).
حالا چون خود این منو فیکس است و 40 پیکسل ارتفاع دارد٬ قسمتی از div ی که به بالا اسکرول شده است٬ پشت منو مخفی می ماند.
لطفا راهنمایی بفرمایید که چگونه این فاصله (فاصله بالای صفحه تا بالای div )رو تنظیم کنم؟
دموی آنلاین:
http://jsfiddle.net/sabeti05/f18d0fj3/1/
این کد است:
<html>
<head>
<style>
#menu{width:100%;height:40px;background:yellow;pos ition:fixed}
#menu ul li{display:inline;padding:10px}
#top, #middle, #bottom{height:800px;border-top:1px solid}
</style>
<script>
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 10;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a onclick="smoothScroll(document.getElementById('top'))">Top</a>
</li>
<li>
<a onclick="smoothScroll(document.getElementById('middle'))">Middle
</a></li>
<li><a onclick="smoothScroll(document.getElementById('bottom'))">Bottom
</a>
</li> </ul>
</div>
<div id="top"><h1>Top</h1></div>
<div id="middle"><h1>Middle</h1></div>
<div id="bottom"><h1>Bottom</h1></div>
</body>
</html>
با تشکر
من یک صفحه متشکل از یک منو و سه div دارم٬ منو دارای سه لینک است که روی هر لینک کلیک بشه٬ یکی از اون سه div رو اسکرول می کنه به بالای صفحه. (به بالاترین قسمت صفحه٬ یعنی فاصله ش تا بالا صفر پیکسل).
حالا چون خود این منو فیکس است و 40 پیکسل ارتفاع دارد٬ قسمتی از div ی که به بالا اسکرول شده است٬ پشت منو مخفی می ماند.
لطفا راهنمایی بفرمایید که چگونه این فاصله (فاصله بالای صفحه تا بالای div )رو تنظیم کنم؟
دموی آنلاین:
http://jsfiddle.net/sabeti05/f18d0fj3/1/
این کد است:
<html>
<head>
<style>
#menu{width:100%;height:40px;background:yellow;pos ition:fixed}
#menu ul li{display:inline;padding:10px}
#top, #middle, #bottom{height:800px;border-top:1px solid}
</style>
<script>
window.smoothScroll = function(target) {
var scrollContainer = target;
do { //find scroll container
scrollContainer = scrollContainer.parentNode;
if (!scrollContainer) return;
scrollContainer.scrollTop += 10;
} while (scrollContainer.scrollTop == 0);
var targetY = 0;
do { //find the top of target relatively to the container
if (target == scrollContainer) break;
targetY += target.offsetTop;
} while (target = target.offsetParent);
scroll = function(c, a, b, i) {
i++; if (i > 30) return;
c.scrollTop = a + (b - a) / 30 * i;
setTimeout(function(){ scroll(c, a, b, i); }, 20);
}
// start scrolling
scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
}
</script>
</head>
<body>
<div id="menu">
<ul>
<li><a onclick="smoothScroll(document.getElementById('top'))">Top</a>
</li>
<li>
<a onclick="smoothScroll(document.getElementById('middle'))">Middle
</a></li>
<li><a onclick="smoothScroll(document.getElementById('bottom'))">Bottom
</a>
</li> </ul>
</div>
<div id="top"><h1>Top</h1></div>
<div id="middle"><h1>Middle</h1></div>
<div id="bottom"><h1>Bottom</h1></div>
</body>
</html>
با تشکر