Smooth scroll to div in polymer element

Question

I am using the Polymer 1.0 tools to build a webapp and I am having trouble starting a smooth scroll to a specific div. I have success using the polymer method this.$.div.scrollIntoView() but this just moves to the specific div without scrolling to it. I would like to use the jQuery method scrollTop() but cannot seem to figure where to fire this function and when/how I can attach this function to a paper-fab. Here is what I have so far:

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

And here are my scripts at the bottom of this specific Polymer element:

<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>

So the first 'Polymer' script does in fact work but not in an appealing way, and then if I try to only use the jQuery scripts, they don't do anything.

This is the jQuery CDN I am using:

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

Any and all help is appreciated, I would really like to figure out how to use non polymer scripts within Polymer elements as that would open up a few more things I would like to achieve with this. Thanks in advance!

Answer 1

I was trying for several hours to find a solution for my own project (preferable one that doesn't require JQuery). Unfortunately all options come with a twist.

scrollIntoView()

With scrollIntoView it is possible to define a behavior which can be set to smooth, instant or auto. The catch is that the scrollIntoViewOptions which are defined in the scrollIntoView are only supported by Firefox.

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

scroll-behavior

I in person would prefer this solution. As it is just a simple CSS snippet. However, similar to the above example not all Browser support it and Chrome and Opera only do it when enabling the experimental web platform features. Which doesn't really help your users.

scroll-behavior: smooth;