javascript - 实现 "scroll to top"按钮

转载作者：太空宇宙更新时间：2023-11-04 07:12:27

25

4

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

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

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

出于学习目的，我想在另一个站点的另一个页面上使用相同的功能。我试图找到我需要的所有位，我已经做到了这一点:

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

我遇到的问题是:

盒子大小不一样
人字形未以相同方式对齐
当我点击 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 没有被调用。

最佳答案

看看这个指南，我认为它可能很有帮助 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 - 实现 "scroll to top"按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51040798/

25

4

0

文章推荐： java - 使用java将字符串数组打印到文本文件

文章推荐： php - 在 PHP 或 Python 中从 HTML 中提取数据

文章推荐： java - hibernate 。删除对象

文章推荐： Java 2D 对象重复

scroll - 修复位置 : absolute element in a overflow: scroll element when scrolling
我想使用 overflow: scroll(或 auto)完成比屏幕宽的图库预览。在右侧，与最后一张可见图像重叠的阴影应该表示右侧可以看到更多图像。这是一个 fiddle :http://jsfid
Extjs Scroll bar automatically scroll down preventing me from scrolling to the top(Extjs滚动条自动向下滚动，防止我滚动到顶部)
我的网格面板的滚动条有问题。当我滚动到底部并试图再次向上滚动时，滚动条会自动向下滚动，防止我滚动到列表的顶部。。。我试着设置布局“合适”，或给面板一个特定的宽度和高度大小，但这些解决方案都不起作用。。
javascript - scroll.scroll 禁用器有什么作用？
这段代码的作用是什么？ var oldScrollPos = $(window).scrollTop(); $(window).on('scroll.scrolldisabler', fu
android - 溢出 :scroll elements on android and native scrolling, -webkit-overflow-scrolling: touch
..对于这个元素，我会在某个时候烧脑。 10 小时后仍然没有任何消息。溢出的元素在 Android stock 浏览器(目前在 s3 mini，android 4.1.2 上测试)中没有任何平滑度。
javascript - 如何将表头的 h-scroll 与表体的 h-scroll 链接起来，而不将表体的 v-scroll 与表头链接起来？
基本上，我想要的是固定标题、卡住 Pane 、表格，例如 http://www.cssplay.co.uk/menu/tablescroll.html 。然而，他的 table 有一个主要弱点。标题不
scroll - Bootstrap : How to enable scroll bars?
我在我的一个项目中使用 Twitter Bootstrap，但是我的内容超出了浏览器 View 的问题。通常您会在屏幕右侧看到滚动条，但在我的情况下没有。我在 overflow: hidden; 之后
scroll - jquery simplemodal插件: popup that scroll with the page
是否有一个“有效”的解决方案可以使对话框随滚动条滚动，而不是仍然从内部窗口边界的中心固定？在某些情况下，用户的分辨率可能太小而无法包含对话框，在这种情况下，部分对话框可能会被隐藏。您可能在隐藏部分有
javascript - 使用溢出时隐藏滚动条 :scroll; but keep scrolling ability
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: hide scrollbar while still able to scroll with mouse/k
css - 溢出-x : scroll does not scroll correctly
我希望能够水平滚动浏览一些文章，但它不起作用。我尝试在内容周围放置一个边框，这样一些内容就会被截断，这样我就可以滚动，但是当我这样做时文章会垂直对齐... 这是我正在使用的代码: HTML:
c++ - Combobox 中的 SCROLL 和 SCROLL
我已经使用 HSROLL 成功创建了一个组合框，如下所示: HWND find = CreateWindowEx(0, WC_COMBOBOX, _T(""), CBS_DROPDOWN | WS_V
horizontal-scrolling - 位置 :fixed no scroll bars appearing
我有一个定位于 position:fixed .当窗口在水平方向上太小而无法容纳 div 时，不会出现滚动条，div 的右侧会被简单地切断。如果我更改为 position:absolute，滚动条
apache-spark - es.scroll.limit和es.scroll.size有什么区别
我对这两个参数完全感到困惑， es.scroll.size es.scroll.limit 我做了一些测试，仍然不知道。 es.scroll.limit = es.scroll.size * num_
javascript - skrollr : Horizontal scroll with smooth scrolling not working
我正在尝试使用 skrollr 构建网站.这是jFiddle link对于我已经尝试过的。但是正如您所见，当 smoothScrolling 设置为 true 时，它不会按预期工作。当设置 smo
javascript - .velocity ("scroll") 如果在 $window.scroll() 函数中使用则无法正常工作
最近，我在一个网站上工作，我想在不同的滚动位置拍摄特定的效果。我正在使用 Velocity JS 制作动画。有一个元素我想自动滚动到另一个特定的滚动位置。这可以使用 Velocity JS 轻松实现。
javascript - 停止工作后溢出: scroll; jquery keeps scrolling until some point,
继续追加，您会看到最新的聊天消息出现，但在某个点后它会停止自动向下滚动。我怎样才能解决这个问题？谢谢。 http://jsfiddle.net/VMcsU/ $("#button1").click(f
java - libGDX : change Scroll position of scroll pane
在我的代码中，y 滚动位置(以像素为单位)是滚动 Pane 的顶部: stage = new Stage(new StretchViewport(480, 800)); Image m
html - div overflow scroll : when scrolled to bottom, 内容开始滚动
我有一个模态对话框，里面有一个可滚动的 div。 div 设置为 overflow: scroll; 但是，当用户在 div 中一直向下滚动时，弹出窗口后面的内容开始向下滚动。问题:当弹出窗口打开时
安卓 : AutoCompleteTextView listview scroll listener (for endless scrolling)
我正在使用 AutoCompleteTextView 让我的 Android 应用程序的用户使用自定义网络服务搜索内容:它按预期工作，但目前我找不到实现“无尽滚动”的方法"在下拉 ListView 上
Android CoordinatorLayout : ToolBar scroll only when list starts scrolling
我在我的应用程序中使用工具栏并使用这个 link我隐藏了工具栏，它按预期完美工作。但是当列表只有一个/两个项目时，不需要滚动工具栏，因为底部有足够的空间。隐藏工具栏背后的想法是当列表项超出屏幕高度时
ios - swift : show searchbar when scroll up and hide it when scroll down
我是 Ios 开发的新手，我在导航项中添加了一个 Searchbar我想要实现的是当我向上滚动 tableview我想隐藏 Searchbar 并在向下滚动时显示它类似于 iPAD/Iphone 上

首页

博学

6Ren·AI

商城

javascript - 实现 "scroll to top"按钮

更新