平滑滾動到div聚合物元素

Question

我正在使用Polymer 1.0工具來構建Web應用程序，因此無法順利滾動到特定的div。 我使用聚合物方法this。$。div.scrollIntoView（）取得了成功，但這只是移動到特定的div而不滾動到它。 我想使用jQuery方法scrollTop（），但似乎無法弄清楚在何處觸發此函數以及何時/如何將此函數附加到紙上。 這是我到目前為止的內容：

<div align="center">
    <paper-fab icon="arrow-downward" id="fab" on-click="scrollToView"></paper-fab>
</div>

這是此特定Polymer元素底部的腳本：

<script>
    Polymer({
        is: 'my-view',
        scrollToView: function() {
            this.$.parallax.scrollIntoView(false); 
        }
    });
</script>
<script type="text/javascript">
    function goToByScroll() {
        $('html, body').animate({
            scrollTop: $("#section_one_cont").offset().top}, 'slow');
    }
    $("#fab").click(function(e) {
            goToByScroll();
    })
</script>

因此，第一個“ Polymer”腳本實際上可以工作，但不能以吸引人的方式起作用，然后，如果我嘗試僅使用jQuery腳本，則它們什么也沒做。

這是我正在使用的jQuery CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

感謝所有幫助，我真的很想弄清楚如何在Polymer元素中使用非Polymer腳本，因為這將為我帶來更多的幫助。 提前致謝！

Answer 1

我嘗試了幾個小時才能找到適合自己項目的解決方案（最好是不需要JQuery的解決方案）。 不幸的是，所有選項都有一個轉折。

scrollIntoView（）

使用scrollIntoView，可以定義可以設置為平滑，即時或自動的行為。 問題在於，僅Firefox支持在scrollIntoView中定義的scrollIntoViewOptions。

element.scrollIntoView({block: "end", behavior: "smooth"});

滾動行為

我本人更喜歡這種解決方案。 因為這只是一個簡單的CSS代碼段。 但是，與上述示例類似，並非所有瀏覽器都支持它，而Chrome和Opera僅在啟用實驗性Web平台功能時才支持它。 這並不能真正幫助您的用戶。

scroll-behavior: smooth;