VueJS BackToTop按钮

Question

所以我正在试验VueJS，但偶然发现了一些我似乎无法找到答案的小事。

我想有一个简单的BackToTop按钮，我通常使用jQuery来解决这个问题：

jQuery(document).ready(function($){
//ToTop
var totop = $("#totop");
$(window).scroll(function(){
    ($(this).scrollTop() > 200) ? totop.fadeIn() : totop.fadeOut();
});
//Smooth Scroll
$(function(){
    setTimeout(function(){
    if (location.hash){
        window.scrollTo(0,450);
        target = location.hash.split('#');
        smoothScrollTo($('#'+target[1]));
        }
    },1);
    $('a[href*="#"]').not('[href="#"]').not('[href="#0"]').click(function(event){
        if(location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname){
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if(target.length){
                event.preventDefault();
                $('html, body').animate({scrollTop: target.offset().top},1000,function(){
                    var $target = $(target);
                    $target.focus();
                    if($target.is(":focus")){
                        return false;
                    }else{
                        $target.attr('tabindex','-1');
                        $target.focus();
                    };
                });
            }
        }
    });
});
$(window).bind("mousewheel",function(){$("html,body").stop(true,false);});
//End
});

但是，由于我想完全忠于VueJS，这对我来说是不可能的。

虽然我已经在使用vue-scrollto库，但我觉得使用一个简单的软件包有点烦人：https://cdn.jsdelivr.net/npm/vue-scrollto

我当前的顶部按钮用html编码如下：

<button id="totop" v-scroll-to="'body'" v-if="toTopVisible"></button>

你可以看到使用vue-scrolto包和if语句使其在滚动时可见或不可见。但即便如此，我也无法理解我的工作方式，并在让我们说300px之后激活滚动。

我认为这将是一件容易的事情，结果很难，而我仍在学习，我很乐意听到一些有关此事的想法。

返回顶部按钮的VueJS代码有什么好处，它不仅可以回滚到0,0（或特定的id / hash），而且只有在300px之后才会出现，如果它位于顶部，则会消失页面（＆lt;比300px滚动）。

我已经浏览过无数的Google Pages，CodePens和JSFiddles，但是他们中的很多人要么使用大量的软件包，要么将JQuery与VueJS结合使用，我认为这更奇怪。

所以，如果有人能够启发我或给我一些方向，我可以寻找一个完美的Back To Top Button，它具有比我的jQuery代码更简单和相似的功能，那就太棒了！

提前感谢您提供更多信息。