1

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

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

风格：

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

查询：

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

所以，我的问题是当我点击按钮时，身体会滚动回到顶部！我不知道为什么会这样。我试过使用这段代码：

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

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

帮助！我真的很想有人解释为什么会这样；我已经尝试了一切！

4

2 回答 2

3

将正文滚动回顶部的原因是因为您的 href 标签，

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

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

编辑

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

<a href="JavaScript:void()">btn</a>
于 2013-10-17T00:58:21.270 回答
1

这是您想要实现的目标吗？

这是一个 JSFiddle 示例供您查看： 单击此处

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

});

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

于 2013-10-17T01:35:40.143 回答