滚动到 HTML 网站中的顶部 JavaScript

2024-04-27

我正在尝试在我的网站中实现滚动到顶部功能:www.arrow-tvseries.com。

网站上可以看到“按钮”,但它无法正常工作,因为单击时它不会滚动到页面顶部。更重要的是,我希望“滚动到顶部按钮”在向下滚动(例如一半页面)时可见。

这是 JavaScript 代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"         type="text/javascript"></script>

<script type="text/javascript">
$(function() {
$(window).scroll(function() {
    if($(this).scrollTop() != 200) {
        $('#backtotop').fadeIn();
    } else {
        $('#backtotop').fadeOut();
    }
});

$('#backtotop').click(function() {
    $('body,html').animate({scrollTop:0},800);
});
});
</script>

HTML 代码(头标签):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"     "http://www.w3.org/TR/html4/frameset.dtd">

<html xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
    <title>Arrow-TvSeries - Home</title>

        <link rel="stylesheet" type="text/css" href="style.css">

    <!--back to top links-->
        <link rel="stylesheet" type="text/css" href="back_to_top.css">
        <script src="/scripts/back_to_top.js" type="text/javascript"></script>
    <!--end of back to top links-->

    <meta property="fb:admins" content="{793705343}"/>
    <!--Google Analytics-->
    <script type="text/javascript">
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-40124321-1', 'arrow-tvseries.com');
      ga('send', 'pageview');
    </script>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="Arrow Tv Show">
    <meta name="keywords" content="arrow, tv show, amel, stephen amell, katie cassidy, oliver, oliver queen, queen">
    <meta name="author" content="Ståle Refsnes">
    <meta charset="UTF-8">

    <!--IPAD setting-->
    <meta name="viewport" content="width = 730, initial-scale=0.70, minimum-scale = 0.5,  maximum-scale = 1.25"/>
</head>     

CSS代码:

#backtotop {
cursor : pointer;
/*display : none;*/
margin : 0px 0px 0px 370px;
position : fixed;
bottom : 10px;
font-size : 90%;
padding : 10px;
width : 100px;
text-align : center;
background-color : #000;
border-radius : 8px;
-webkit-border-radius : 8px;
-moz-border-radius : 8px;
filter: alpha(opacity=60);
-khtml-opacity : 0.6;
-moz-opacity : 0.6;
opacity : 0.6;
color : #FFF;
font-size : 14px;
z-index : 10000;
font-family: arial;
}

#backtotop:hover {
filter : alpha(opacity=90);
-khtml-opacity : 0.9;
-moz-opacity : 0.9;
opacity : 0.9;
}

如果您需要更多代码或信息,请随时告诉我。

Thanks


试试这个,如果不起作用请告诉我:

<!DOCTYPE html>
<html>
    <head>
        <style>
            input.pos_fixed
            {
                position:fixed;
                top:30px;
                right:5px;
            }
        </style>

        <script>
            function scrollWindow()
            {
                window.scrollTo(0,0);
            }
        </script>
    </head>

    <body>
        <br>
            <input class="pos_fixed" type="button" onclick="scrollWindow()" value="Scroll" />
        <br>
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

滚动到 HTML 网站中的顶部 JavaScript 的相关文章

  • 从 json 创建下拉列表

    我有一个这种形式的 json COLUMNS ID Name DATA 1 Joe 2 Sam 3 Doug 我正在寻找一个如何在 javascript 中从该数据创建下拉列表的示例 但 json dropdown 列表的所有示例 json
  • CSS 居中变换

    为什么使用变换居中可以完美地平移并左 50 居中 相对于父级的位置 但右 50 却不能 工作示例 span class icon position absolute top 50 left 50 transform translate 50
  • 规则和夏令时

    我在用着rrule https github com jakubroztocil rrule在我的数据库中创建和存储事件 一切正常 直到我发现我的重复事件与 3 月 31 日之后有一个小时的差异 在法国 这一天我们进行夏令时更改 实际上 我
  • Angular Material 中的 img 标签内的 md-tooltip

    我想在悬停在 3 个不同图像上时显示 3 个不同的工具提示
  • IPython Notebook Markdown——允许的 HTML 标签列表是什么以及如何更改它们?

    我正在使用 IPython Notebook markdown 创建一个文档 它确实允许一些 HTML 例如 img 例如但我添加了包含 SVG 文件 但它不会显示在 IPython Notebook 输出中 我仔细检查了 IPython
  • CSS 定位在 div 内

    我使用的 div 内部有 2 个元素 我想将第一个元素垂直对齐到 div 的顶部 将第二个元素垂直对齐 div 是页面的右侧部分 等于主要内容的高度 right float right width 19 background FF3300
  • 常见的电子邮件客户端是否会预取链接而不是图像?

    尽管我知道很多电子邮件客户端会预取或以其他方式缓存图像 我不知道有任何预取常规链接 例如 a href somelinkhere some link a 这是某些电子邮件的做法吗 如果是 是否存在某种不跟随类型rel可以添加到链接中以帮助防
  • 不透明div内的透明文本

    我有一个背景图像 上面有一个白色的 div 我希望该 div 内的文本是透明的 以便您可以 透过 背景图像 这有可能吗 应该看起来像这样 您需要将其用于您的文本CSS webkit text fill color transparent
  • 使用“onclick”和 JavaScript 获取按钮上的 X/Y 坐标

    我是一名 JavaScript 初学者 正在寻找一种方法来获取单击按钮时的 x 和 y 坐标 这适用于 Opera IE9 和 Chrome 但我无法让它在 Firefox 中工作 到目前为止 这是我的代码 JavaScript 中的函数
  • datatables.search 函数修改后的奇怪行为

    这个问题是后续问题这个问题 https stackoverflow com questions 54671211 overriding datatables js search behavior 我已经创建了这个 JSFiddle http
  • 如何在 data-disable-with 上设置 html 到 Rails Submit_tag

    我有一个使用 bootstrap 的 RoR 应用程序 我正在尝试将 fontawesome html 图标标签应用于 Submit tag 帮助程序 但它似乎不受支持 当我单击 提交 时 禁用内容仅显示为字符串 而不是解释为 html 尽
  • ASP.NET 中的 JavaScript 事件处理程序

    我有以下 iframe 控件 旨在成为类似 facebook 的按钮 iframe gt 我在上面定义了 javascript 函数 如下所示
  • 来自 geoJSON 的 Google 地图航点

    我想从 geoJSON 文件加载行程 目前来说 它是有效的 但只有两点 但我需要添加 4 或 5 个航路点 我的代码只读取前两个点并将它们设置为起点和目的地 这是我的代码 google maps event addListener map
  • 所有人共享的 First Load JS 在 next.js 中相当重

    I have a project on Next js framework and the problem is that First Load JS shared by all pages is rather heavy I want t
  • regex php - 查找 div 中具有特定 ID 的内容

    我确信这是一个简单的问题 尽管我在谷歌上进行了如此多的搜索和搜索 但我似乎无法弄清楚这有什么问题 我在此页面上的其他区域使用类似的表达式来准确返回我想要的内容 但是 我无法让这个特定的位返回我想要的东西 所以也许有人可以帮助我 我有一个带有
  • 如何在 vue.js 中使用 SVG.js 插件?

    我在用svg js在我的 Laravel 项目中运行vue js 这就是我使用的方式svg js Step 1 安装svg js作为我的 vue 应用程序中的插件 import svgJs from svg js dist svg expo
  • 如何创建包含左对齐元素的宽度不确定的居中 div?

    我有几个统一的蓝色元素 div style display inline block 位于紫色 div 内的红色 div 内 Mockup https i stack imgur com ylTm9 png 图 我希望蓝色元素左对齐 一行中
  • 将背景图像放入菱形容器中会导致容器失去形状

    标题总结得很好 我可以很容易地绘制菱形 但是当我将图像添加到背景时 它会为形状添加更多边 我似乎无法弄清楚为什么添加背景图像时会发生这种情况 任何意见 将不胜感激 这是我的代码 请原谅内联 css 我只是这样做 直到我有一个可行的解决方案
  • 使用node.js/Express从HTTP重定向到HTTPS

    有什么方法可以更改我的 Web 应用程序以侦听 HTTPS 而不是 HTTP 我正在使用node js express 我需要它来侦听 HTTPS 因为我正在使用地理定位 而 Chrome 不再支持地理定位 除非从 HTTPS 等安全上下文
  • firefox 不支持 mediastreamtrack.getsources,如何执行等效操作

    有没有等效的方法来获取连接到 PC 的视频设备列表 除了内置网络摄像头连接之外 我还有一个外部网络摄像头连接 mediastreamtrack getsources 在 Chrome 中工作 但 Firefox 报告 TypeError M

随机推荐

  • fopen 或 file_get_contents 更快?

    我正在运行多个流量较高的网站 根据要求 所有图像均通过下载image php id IMAGE ID HERE 如果您以前曾经这样做过 您就会知道该文件将读取文件图像并使用特殊标头将其回显到浏览器 我的问题是 服务器上的负载非常高 150
  • 如何显示由 setTimeout/setInterval 生成的每个正在运行的线程的列表

    我想通过纯 javascript 或浏览器中的任何类型的控制台或其他方式来完成此操作 是否可以 Thanks 进一步说明 我想调试一个执行动画的库 我想知道如果有多个对象被动画化 是否会创建多个计时器 注意setTimeout 不会产生新线
  • Git:确定分支是否处于合并冲突状态

    我正在编写一个 bash 脚本来进行一些自动化操作 该脚本的一部分涉及导航到本地存储库 切换到本地 master 分支 然后拉取远程 master 以使用最新代码更新本地 master 分支 有谁知道是否有一种方法可以以编程方式确定拉取是否
  • 哪个运算符更快:!= 或 >

    哪个运算符更快 gt or 示例 我想针对 1 测试一个值 可以为正值或 1 if time gt 1 or if time 1 时间的类型为 int 标准没说 因此 这取决于给定编译器在给定版本中生成哪些操作码 以及给定 CPU 执行它们
  • dplyr 在动物园对象中发生变异

    我试图应用dplyr mutate in zoo目的 但是 它产生了一个错误 Error in UseMethod mutate no applicable method for mutate applied to an object of
  • 如果设备关闭,尝试在 IOS 应用程序中检索之前配对的蓝牙设备将不会响应失败

    很抱歉标题很长 但我们在使用 iOS 版 corebluetooth 时遇到了一个非常有趣的问题 我们正在 CBCentralManager 中发出对retrievePeripherals 的调用 并且能够找到之前配对的设备 不管设备是打开
  • Firebase 重置密码 Swift [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想知道你们是否可以向我展示如何在 Swift 中设置重置密码 我目前正在使用 Firebase 作为我的后端服务 我只需要代码 答案
  • 用于列表和映射的 C++ 容器

    我们有一个键和值对的集合 我们需要一个容器 它可以帮助我们检索值 o 1 但也可以记住插入顺序 以便当我们进行迭代时 我们可以像插入顺序一样进行迭代 由于键是一个字符串 我们将无法使用集合或类似的结构 目前我们已经定义了自己的集合类 其中包
  • 链表、数组和硬件内存缓存

    虽然之前有人问过关于链表与数组的问题 但答案大多归结为我们大多数人在某些时候可能已经学到的东西 列表擅长插入和删除 数组擅长随机访问 现在 像 Bjarne Stroustrup 这样受人尊敬的人已经argued https www you
  • Flutter IOS 使用连接或 wifi 插件读取 wifi 名称

    这个问题是类似的这个问题 https stackoverflow com questions 52498906 how to get the wifi namessid of the currently connected wifi in
  • 是否可以有效地计算 lambda 演算项?

    我最近用 lambda 演算编写了很多程序 我希望能够实时运行其中一些程序 然而 尽管趋势函数范式基于 lambda 演算和 B 约简规则 但我找不到一个不是玩具 不以效率为目的的评估器 函数式语言应该很快 但我所知道的那些语言实际上并不提
  • Android 6.0如何隐藏导航栏?

    我有以下代码 getWindow getDecorView setSystemUiVisibility View SYSTEM UI FLAG LAYOUT STABLE View SYSTEM UI FLAG LAYOUT HIDE NA
  • 定制 NET MAUI 启动画面

    我正在尝试制作闪屏 Net毛伊岛包含渐变背景和动画徽标 我看过有关如何制作简单的飞溅的教程
  • 如何在代码中设置控件模板?

    我在 XAML 中有这个
  • 在自定义 Flex 组件中绘制叠加层

    如何在 Flex 中创建一个自定义 MXML 组件 该组件基于现有组件 但在某些情况下会在该现有组件上绘制覆盖层 理想情况下 新组件应该基于 派生自 现有组件 以便现有组件的出现可以用新组件替换 我尝试在新组件中重写 updateDispl
  • Selenium + Python如何监听元素的变化

    这个想法是创建一个机器人来读取聊天消息 所有消息都在一个ul gt li 不必写消息 例如 ul class message list li class message Hello There li li class message Hel
  • C++ 中的映射的多个键

    我有一个表 其中的条目是这样的 Row Column1 Column2 Column3 Column4 1 0X0A 1 2 A 2 0X0B 2 2 B 3 0x0C 3 2 C 现在我想使用映射 以便我可以使用第 1 列或第 2 列作为
  • 如何使用 Apache Beam 从 Google Pub/Sub 访问消息 ID?

    我一直在 Python 2 7 16 上使用 2 13 0 SDK 测试 Apache Beam 以流模式从 Google Pub Sub 订阅中提取简单消息 并写入 Google Big Query 表 作为此操作的一部分 我尝试使用 P
  • 使用 PIL 对图像进行着色,同时保持透明度?

    好吧 情况是这样的 我想使用 Python 图像库来 主题化 图像 如下所示 Theme color 33B5E5 IN OUT 我使用 ImageMagick 命令得到了结果 convert image png colorspace gr
  • 滚动到 HTML 网站中的顶部 JavaScript

    我正在尝试在我的网站中实现滚动到顶部功能 www arrow tvseries com 网站上可以看到 按钮 但它无法正常工作 因为单击时它不会滚动到页面顶部 更重要的是 我希望 滚动到顶部按钮 在向下滚动 例如一半页面 时可见 这是 Ja