实施“滚动到顶部”按钮
[英]Implementing “scroll to top” button
问题描述
Here on my website is has a "back to top" feature: 
我的网站上具有“返回页首”功能：
https://www.publictalksoftware.co.uk/ https://www.publictalksoftware.co.uk/
Scroll th epage down and then you will see it. 向下滚动该页面，然后您将看到它。 Now, this feature was implemented as part of the theme I am using in Wordpress. 现在，此功能已实现为我在Wordpress中使用的主题的一部分。
I want to use this same feature on another page on another site for learning purposes. 我想在另一个站点的另一个页面上使用此相同功能，以进行学习。 I tried to locate all the bits I needed and I have got this far: 我试图找到所需的所有位，而到目前为止，我已经做到了：
http://trucklesoft.co.uk/test/backtotop.php# http://trucklesoft.co.uk/test/backtotop.php#
The problems I am having are: 我遇到的问题是：
- The size of the box is not the same 盒子的大小不一样
- The chevron is not aligned in the same way 人字形的对齐方式不同
- Nothing happens when I click the chevron 当我单击人字形时什么也没有发生
- The box is always visible 该框始终可见
What steps am I missing here? 我在这里错过了哪些步骤？
Update 更新
based on the comments I have added a couple of script lines. 根据评论，我添加了一些script行。 I now have this in my head section: 我现在在我的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>
It has improved a bit. 它有所改善。 BUt now it jumps and does not scroll. 现在，它跳并且不滚动。 I don't understand why my javascript is not being called. 我不明白为什么我的JavaScript没有被调用。
2 个解决方案
解决方案1
1 已采纳 2018-06-26 10:42:09
Take a look of this guide, I think it could be quite helpful 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>
解决方案2
0 2018-06-26 11:24:09
You can use a small bit of JS to work out how far you need to move and then use animation frames to scroll. 您可以使用一小段JS来计算您需要移动多远，然后使用动画帧滚动。
I've adapted and simplified this project 我已经修改并简化了这个项目
The querySelectorAll bit at the bottom specifically looks for anchors that are internal and turns them into scroll buttons. 底部的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>
I hope you find this helpful. 我希望你觉得这有帮助。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.