更新

Question

我的网站上具有“返回页首”功能：

https://www.publictalksoftware.co.uk/

向下滚动页面，您将看到它。现在，此功能已实现为我在Wordpress中使用的主题的一部分。

我想在另一个站点的另一个页面上使用此相同功能，以进行学习。我试图找到我需要的所有位，而我已经走了这么远：

http://trucklesoft.co.uk/test/backtotop.php#

我遇到的问题是：

盒子的大小不一样
人字形的对齐方式不同
单击人字形按钮没有任何反应
该框始终可见

我在这里错过了哪些步骤？

更新

基于这些评论，我添加了几行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没有被调用。

Answer 1

看看本指南，我认为它可能会很有帮助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>

Answer 2

您可以使用一小段JS来计算您需要移动多远，然后使用动画帧进行滚动。

我已经修改并简化了project

底部的querySelectorAll位专门查找内部的锚点并将其转换为滚动按钮。

function scrollIt(destination, duration = 350) {
  const start = window.pageYOffset;
  const startTime = 'now' in window.performance ? performance.now() : new Date().getTime();
  const body = document.body;
  const dele = document.documentElement;

  const dHeight = Math.max(body.scrollHeight, body.offsetHeight, dele.clientHeight, dele.scrollHeight, dele.offsetHeight);
  const wHeight = window.innerHeight || dele.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
  const dOffset = typeof destination === 'number' ? destination : destination.offsetTop;
  const dOffsetScroll = Math.round(dHeight - dOffset < wHeight ? dHeight - wHeight : dOffset);

  if ('requestAnimationFrame' in window === false) {
    window.scroll(0, dOffsetScroll);
    return;
  }

  function scroll() {
    const now = 'now' in window.performance ? performance.now() : new Date().getTime();
    const time = Math.min(1, ((now - startTime) / duration));
    const timeFunction = time;
    window.scroll(0, Math.ceil((timeFunction * (dOffsetScroll - start)) + start));

    window.pageYOffset === dOffsetScroll || requestAnimationFrame(scroll);
  }

  scroll();
}

document.querySelectorAll('a').forEach(el => {
  el.addEventListener('click', (e) => {
    const href = e.target.getAttribute('href');
    if (href.match(/^#/)) {
      e.preventDefault();
      if (href.match(/^#$/)) {
        scrollIt(0);
      } else {
        scrollIt(document.querySelector(href));
      }
    }
  })
})

<div>
  test <a href="#test">to bottom</a>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="test">
  test <a href="#">to top</a>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

希望您对此有帮助。

实施“滚动到顶部”按钮

更新

2 个答案: