Question

我创建了一个自定义菜单。见here。点击此链接后，我会弹出一个带有很长项目列表的影子框。现在我想要一个“回到顶部”的锚点链接，它将我带回菜单列表的顶部。

Answer 1

我已使用#box ID设置您的灯箱。

<强> HTML

<div id="box">
...
<!-- long content there -->
<a href="#" id="toTop">To Top</a>
</div>

CSS （设置元素的宽度）

#box {
    position:relative;
    width:200px;
    height:250px;
    overflow:auto;
}

#box #toTop {
    position:absolute;
    display:none;
    left:150px;
    top:10px;
}

<强>的jQuery

$('#box').bind('scroll', function(e) {
   if ($(this).scrollTop() > 100) {
        $('#toTop').fadeIn();
        $('#toTop').css({'top' : $(this).scrollTop() + 100});
   } else {
        $('#toTop').fadeOut();
    }
});

$(document).on('click', '#toTop', function(e) {
    e.preventDefault();
    //$('#box').scrollTop(0); //just go to top
    $('#box').animate({scrollTop : 0},'slow'); //animate
});

Fiddle

Answer 2

非常简单：

document.querySelector("iframe").contentWindow.scrollTo(0,0);

现在在页面上放一个按钮，点击即可调用该按钮。哦，省略iframe主体上的height:100%，这样就可以摆脱第二个滚动条。

您只需粘贴上面的行并在浏览器的控制台中使用您的网页执行此操作即可试用。

滚动到灯箱顶部

2 个答案: