javascript - 在灯箱中滚动到顶部

Question

我创建了一个自定义菜单。见这里。单击此链接后，我会弹出一个影子框，其中包含一长串项目。现在我想要一个“回到顶部”的锚链接，它可以让我回到菜单列表的顶部。

Answer 1

我已经用#boxid 设置了你的灯箱。

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

小提琴

Answer 2

很容易：

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

现在在页面上放置一个按钮并在点击时调用它。哦，省略height:100%iframe 主体上的 ，这样你就摆脱了第二个滚动条。

您可以通过粘贴上面的行并在您的网页的浏览器控制台中执行它来尝试这一点。