在聚合物元素中平滑滚动到 div

Question

我正在使用 Polymer 1.0 工具构建 Web 应用程序，但我无法开始平滑滚动到特定 div。我成功地使用了聚合物方法 this.$.div.scrollIntoView() 但这只是移动到特定的 div 而没有滚动到它。我想使用 jQuery 方法 scrollTop() 但似乎无法确定在何处触发此功能，并且 when/how 我可以将此功能附加到 paper-fab。这是我目前所拥有的：

<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 片段。但是，与上面的示例类似，并非所有浏览器都支持它，Chrome 和 Opera 仅在启用实验性网络平台功能时才支持。这并不能真正帮助您的用户。

scroll-behavior: smooth;

在聚合物元素中平滑滚动到 div

Smooth scroll to div in polymer element

html

javascript

jquery

polymer-1.0