固定元素动画卷轴顶部

Question

我再次发布了这个，但我想我的问题还不够清楚。

我有一个隐藏的固定元素，我想从侧面打开时点击它。

风格：

<style> 
#fixed { 
    position: fixed; 
    width: 200px; 
    top: 120px; 
    left: -200px; 
    height: 200px; 
    z-index: 5; 
} 

.leftc { 
    left: 0 !important; 
} 
</style> 

HTML：

<div id="fixed"> 
<div id="fixedbtn"><a href=#>btn</a></div> 
</div> 

的Jquery：

<script> 
$("#fixedbtn a").click(function(e) { 
    $('#fixed').toggleClass('leftc'); 
}) 
</script> 

所以，我的问题是，当我点击按钮身体向后滚动到顶部！我不知道为什么会发生这种情况。我已经使用这个代码的尝试：

var windowPos = $(window).scrollTop(); 
$('body, html').animate({scrollTop: windowPos}, "fast"); 

...但我可以看到顶部的滚动条举措，回到正确的位置。我尝试删除“快速”，但没有运气。

帮助！我真的很想让别人解释为什么会发生这种情况;我已经尝试了一切！

Answer 1

它的滚动机身背部顶端的原因是因为您的href标签，

<a href="#">btn</a> 

“＃”是一个锚。例如：如果我将标签的href设置为“#myDiv”，它将滚动到ID为“myDiv”的div。既然你只放了一个“＃”，它就会滚动到顶部。

编辑

如果你真的想你的标签去无处，你可以试试这个

<a href="JavaScript:void()">btn</a> 

Answer 2

这是你正在寻找实现什么？

这里是一个的jsfiddle例子给你看看：CLICK HERE

HTML：

<div class="fixed"></div> 
<a href="Javascript:void()" class="fixedbutton">Button</a> 

CSS：

.fixed { 
    position: fixed; 
    width: 0px; 
    top: 120px; 
    left: -10px; 
    height: 200px; 
    z-index: 1; 
    border: 5px solid #ccc; 
    background-image: url("http://www.cinemablend.com/images/news_img/7768/_7768.jpg"); 
    background-position: center; 
    background-size: cover; 
} 
.fixedbutton { 
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff; 
    box-shadow:inset 0px 1px 0px 0px #ffffff; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    background-color:#ededed; 
    text-indent:0; 
    border:1px solid #dcdcdc; 
    display:inline-block; 
    color:#777777; 
    font-family:"Courier",sans-serif; 
    font-size:15px; 
    font-weight:bold; 
    font-style:normal; 
    height:50px; 
    line-height:50px; 
    width:100px; 
    text-decoration:none; 
    text-align:center; 
    text-shadow:1px 1px 0px #ffffff; 
} 
.fixedbutton:hover { 
    background-color:#dfdfdf; 
} 
.fixedbutton:active { 
    position:relative; 
    top:1px; 
} 

的jQuery：

$('.fixedbutton').toggle(function() { 
    $('.fixed').stop().animate({ 
     width: "200px", 
}, function() { 
    $('.fixed').stop().animate({ 
     width: "-10px",  
    }, 1000); 

}）;

我调整了从点击切换到切换事件的功能。希望这是你正在寻找的。