更新

根据评论，我添加了几script行。我现在在我的head部分有这个：

<head>
<link href="/test/fa/css/all.css" rel="stylesheet"> <!--load all styles -->
<script defer src="/test/fa/js/all.js"></script> <!--load all styles -->
<script type='text/javascript' src='test/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='test/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var cnArgs = {"ajaxurl":"https:\/\/www.publictalksoftware.co.uk\/wp-admin\/admin-ajax.php","hideEffect":"fade","onScroll":"no","onScrollOffset":"100","cookieName":"cookie_notice_accepted","cookieValue":"true","cookieTime":"2592000","cookiePath":"\/","cookieDomain":"","redirection":"","cache":"","refuse":"no","revoke_cookies":"0","revoke_cookies_opt":"automatic","secure":"1"};
/* ]]> */
</script>
<style type="text/css">
#sv-totop {
    position: fixed;
    right: 40px;
    bottom: 65px;
    display: none;
    outline: none;
    background: #d35438 !important;
    -moz-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
    -webkit-box-shadow: inset 0 30px 30px -30px #7F7F7F, inset 0 -30px 30px -30px #7F7F7F;
    box-shadow: inset 0 30px 30px -30px #606060, inset 0 -30px 30px -30px #606060;
    width: 45px;
    height: 45px;
    text-align: center;
    color: #E7D8A3 !important;
    padding: 8px;
    font-size: 20px;
    -webkit-transition: all 0.1s linear 0s;
    -moz-transition: all 0.1s linear 0s;
    -o-transition: all 0.1s linear 0s;
    transition: all 0.1s linear 0s;
    font-family: 'Tahoma', sans-serif;
    z-index: 99999999;
}
#sv-totop:hover {
    opacity: 0.8;
    -moz-box-shadow: inset 0 0 20px #000000;
    -webkit-box-shadow: inset 0 0 20px #000000;
    box-shadow: inset 0 0 20px #000000;
}
</style>
<script type="text/javascript">
    var colomatduration = 'fast';
    var colomatslideEffect = 'slideFade';
    var colomatpauseInit = '';
    var colomattouchstart = '';
</script>
<script type="text/javascript">
    jQuery(document).ready(function($){
        $(window).scroll(function () {
            if ( $(this).scrollTop() > 500 )
                $("#sv-totop").fadeIn();
            else
                $("#sv-totop").fadeOut();
        });

        $("#sv-totop").click(function () {
            $("body,html").animate({ scrollTop: 0 },1000 );
            return false;
        });
    });
</script>
<script type="text/javascript">
    jQuery(document).ready(function() {
    });  
</script>
</head>

它已经有所改善。但是现在它会跳转并且不会滚动。我不明白为什么我的 javascript 没有被调用。

标签： javascripthtmlcss

看看本指南，我认为它可能会很有帮助How TO - Scroll Back To Top Button

  // When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
  
  $('#myBtn').on('click', function (e) {
        e.preventDefault();
        $('html,body').animate({
            scrollTop: 0
        }, 700);
    });

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

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

<button id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

javascript - 实现“滚动到顶部”按钮

问题描述

更新

解决方案

推荐阅读