平滑滚动到聚合物元素中的 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 元素中使用非聚合物脚本，因为这会开辟更多我想用这个实现的东西。提前致谢！

Answer 1

我尝试了几个小时来为我自己的项目寻找解决方案（最好是不需要 JQuery 的）。不幸的是，所有选项都有一个转折点。

scrollIntoView()

使用 scrollIntoView 可以定义可以设置为平滑、即时或自动的行为。 问题是 scrollIntoView 中定义的 scrollIntoViewOptions 只有 Firefox 支持。

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

scroll-behavior

我个人更喜欢这种解决方案。因为它只是一个简单的 CSS sn-p。 但是，与上面的示例类似，并非所有浏览器都支持它，Chrome 和 Opera 仅在启用实验性 Web 平台功能时才支持。 这并不能真正帮助您的用户。

scroll-behavior: smooth;