滾動到燈箱頂部

-1

我已經創建了自定義菜單。請參閱here。在點擊這個鏈接時，我有一個彈出的影子箱，裏面有一長串物品。現在我想要有一個「回到頂部」的錨鏈接，它將我帶回菜單列表的頂部。滾動到燈箱頂部

2013-02-13 Janmejay

你在說什麼？你能更精確嗎（添加一些代碼/小提琴）？ – 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

來源

2013-02-13 08:57:05 soyuka

相當容易：

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

現在把頁面上的按鈕，並調用上點擊。哦，並省略iframe的身體height:100%，這樣你擺脫了第二個滾動條。

您可以通過粘貼上面的代碼並在瀏覽器的控制檯中使用您的網頁來執行此操作。

來源

2013-02-13 09:04:10 Christoph

滾動到燈箱頂部

回答

相關問題