我有一个包含三个 div 的页面。我想使用 animate 和每个 div 的偏移位置将每个 div 放入 View 中。我可以看出正在传递链接属性,并且我正在获取偏移量数字。 (通过 window.alerts 验证)问题是,div 容器不会移入 View 。
这是链接
<div id="minibar" class="minibar">
<a href="#main" class="rarrow">Main</a>
<a href="#slide1" class="rarrow">Creative Showcase</a>
<a href="#slide2" class="rarrow">News</a>
</div>
内容div
<div id="main" class="main" ><content></div>
<div id="slide1" class="main"><content></div>
<div id="slide2" class="main"><content></div>
内容 CSS
.main{
width:800px;
padding:10px;
color:#000;
background:rgba(255,255,255,.85);
height:405px;
overflow:auto;
position: relative;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
box-shadow: 1px 2px 7px rgba(0, 0, 0, 0.35);
text-shadow:none;
margin-top:175px;
font-weight:bold;
}
JS:
<script>
$(document).ready(function(){
$('#minibar a').click(function(){
var el = $(this).attr('href');
var offset = $(el).offset();
var top = offset.top - 100;
$('body,html').animate({scrollTop:offset.top,scrollLeft:offset.left},500);
return false;
});
});
</script>
最佳答案
var el = $( this.getAttribute('href') );
或者使用 jQuery:
var el = $( $(this).attr('href') );
$(document).ready(function(){
$('#minibar a').click(function( e ){
e.preventDefault();
var el = $( this.getAttribute('href') );
var offs = el.offset();
$('html, body').stop().animate({ scrollTop: offs.top-100 },500);
});
});
你从来没有使用过你的top
变量,我真的不知道为什么scrollLeft
。如果需要,请使用它:
$('html, body').stop().animate({
scrollTop: offs.top-100,
scrollLeft: offs.left
},500);
关于jQuery ('html.body' ),动画不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15260242/