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

}）;

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

固定元素动画在顶部滚动主体

2 个答案: