Question

概要

我需要在每个＆lt; div class =“wrapSection”＆gt;之后插入一个“返回顶部”链接。我成功使用了以下内容：

<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新手，我做了看似合乎逻辑的事情，这似乎永远不是正确的答案。

在坚果中

或多或少，我需要在每个＆lt; div class =“wrapSection”＆gt;之后动态显示：

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

Answer 1

这是我提出的解决方案：

$(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/

返回页首使用Scroll进行动态创建的链接

1 个答案: