回到頂部鏈接，動態創建，用滾動

我需要插入一個「返回頂部」鏈接每< DIV CLASS =「wrapSection」 >後。我已成功使用以下內容：

<script> 
$('.wrapSection').after(' 
    <div class="backToTop clearfix"> 
     <a href="#top" class="up">Back To Top </a> 
    </div> 
'); 
</script>

但是，我想在點擊'返回頂部'時使用平滑滾動。考慮到這一點，我嘗試了以下內容：

<script> 
$('.wrapSection').after(' 
<div class="backToTop clearfix"> 
    <a href="javascript:void(0)" onclick="goToByScroll('top')" class="up"> 
     Back To Top 
    </a> 
</div> 
'); 
</script>

這不起作用。作爲一名jQuery新手，我做了似乎合乎邏輯的事情，這似乎永遠不是正確的答案。

簡而言之

或多或少，我想這能出現，動態，每< DIV CLASS = 「wrapSection」 >後：

<div class="backToTop"> 
    <a class="top" href="javascript:void(0)" onclick="goToByScroll('top')"> 
     Back to Top 
    </a> 
</div>

來源

2012-12-23 chsweb

我知道last-item.js是相當混亂的，但它的大部分工作 – chsweb

看看腳本'backtotop.js'，似乎有一個外部字符在最後阻止瀏覽器運行它。 –

我直接從下面複製它，讓我試試jsfiddle頁面代碼。 – chsweb

這是我想出瞭解決方案搭配：

$(document).ready(function() { 
    // Markup to add each time - just give the element a class to attach an event to 
    var top_html = '<div class="backToTop"><a href="#" class="top">Back To Top</a></div>'; 
    $(".wrapSection").after(top_html); 

    // Use event delegation (see http://api.jquery.com/on/) 
    $("body").on("click", ".top", function(e) { 
     e.preventDefault(); 
     $("html,body").animate({ scrollTop: 0 }, "slow"); 
    }); 
});

你可以在這裏嘗試的jsfiddle：http://jsfiddle.net/F9pDw/

來源

2012-12-23 21:57:55

這裏是我嘗試應用你的方法： http://chsweb.me/VY4Ubo – chsweb

克雷格，你的解決方案結束了工作。我會在這裏保留這個例子一段時間，但jsfiddle鏈接是任何出現問題的人的最好例子。 – chsweb

回到頂部鏈接，動態創建，用滾動

回答

相關問題