滚动到灯箱顶部

问题描述：

我已经创建了自定义菜单。请参阅here。在点击这个链接时，我有一个弹出的影子箱，里面有一长串物品。现在我想要有一个“回到顶部”的锚链接，它将我带回菜单列表的顶部。滚动到灯箱顶部

你在说什么？你能更精确吗（添加一些代码/小提琴）？ – soyuka 2013-02-13 08:23:54

如果您可以打开我给出的链接，则会出现一个名为“创建自定义菜单”的链接。现在，如果你点击那个，那么会出现一个弹出式开放，这是一个影子框。在阴影框内有一个食物项目清单。现在是一个很长的名单。因此，我希望在此列表末尾有一个返回顶部的选项。 – Janmejay 2013-02-13 08:28:42

您可以使用javascipt轻松地在普通页面中执行此操作。但我想要一个阴影框中的功能。 – Janmejay 2013-02-13 08:30:44

答

我已将您的灯箱设置为#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

答

相当容易：

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

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

您可以通过粘贴上面的代码并在浏览器的控制台中使用您的网页来执行此操作。

相关推荐