平滑滚动到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;