固定元素動畫卷軸頂部

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); 

}）;

我調整了從點擊切換到切換事件的功能。希望這是你正在尋找的。