代码之家 › 专栏 › 技术社区 › Andrew Truckle

执行“滚动到顶部”按钮

css html javascript

Andrew Truckle · 技术社区 · 7 年前

我的网站上有一个“返回顶端”功能:

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

向下滚动肩章,你就会看到它。现在,这个特性是作为我在WordPress中使用的主题的一部分实现的。

我想在另一个站点的另一个页面上使用这个相同的功能来学习。我试着找到我需要的所有信息,我已经找到了:

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

我遇到的问题是:

盒子的大小不一样
V形的对齐方式不同
当我单击V形按钮时什么也不会发生
盒子总是可见的

我在这里错过了什么步骤?

更新

根据评论,我添加了 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。

2 回复 | 直到 7 年前

Matt 7 年前

看看这本指南,我想它会很有帮助的 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>

Andrew Bone 7 年前

您可以使用一点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>

我希望你觉得这有帮助。