滚动到某种程度时如何显示内容

只有在某种程度上滚动时，才会显示“返回TOP”按钮

如果在首次显示网页时将页面滚动到某种程度时滚动到某种程度，您将看到固定按钮，例如窗口右下角的“返回顶部”...不是吗？对于需要经常浏览顶部的页面，例如垂直长页面(例如页面顶部的目录)，可以方便地将快速返回按钮设置为顶部。因此，这次我们将解释如何根据用户的滚动量动态显示“返回TOP”按钮。它不仅限于可以这种方式显示的“返回顶部”等按钮。例如，您可以显示您喜欢的任何内容，例如“相关信息列表”框。

使用jQuery很容易掌握滚动量并做一些事情

所需信息和处理

根据滚动量显示按钮需要以下两种方法。

一种获取“从当前显示的位置从页面顶部滚动了多少像素？”的信息的方法。“仅在条件满足时显示指定框”的方法在这两种情况下，使用“jQuery”这是一个着名的JavaScript库，可以很容易地用简短的描述来实现。尽管稍后将描述详细描述方法，例如，

$(window)。scrollTop();

您可以获得有关“从页面顶部滚动了多少像素的信息？通过利用它，可以很容易地创建诸如“按指定像素滚动时显示指定框”的脚本。如果您可以使用这种“滚动量的查看器”方法，则脚本的应用范围会扩展并且非常有用。

滚动到某种程度时显示“返回TOP”按钮的示例

滚动到一定程度时，会显示“返回TOP”按钮

我们在本文中提供了示例页面，因此请尝试访问浏览器中的以下链接。→ 例子，以显示“回到TOP”按钮取决于滚动的量时，在上述页中的向下方向滚动超过350像素，它是在页面的右下角半透明键“▲返回TOP”所示在右边的图中它会出现。相反，当您在350px内返回时，按钮会消失。请操作浏览器的滚动条并尝试显示/隐藏按钮。这一次，我将解释如何制作这样的页面。让我们来看看如何

达到指定的滚动量时，如何显示“返回TOP”按钮

要在达到指定的滚动量时显示“返回TOP”按钮，大致需要以下三个描述。0 JQuery的读主体1 “回到TOP”被固定到屏幕按钮的右下角使HTML和CSS和2 来确定滚动量，写一个脚本用于切换按钮的显示和非显示顺序在以下我会向你解释一下。

0.加载jQuery正文

由于我们在这里使用jQuery，我们需要先加载jQuery主体。例如，如果您在HTML中编写以下行，则可以从jQuery分发站点提供的CDN服务器中读取jQuery主体。如果您不太了解，请在此期间在HTML中写下以下一行。

如果您的Web服务器上已经有jQuery主体，即使您编写它以便您阅读它也没有问题。

1.将其固定在屏幕的右下方。使用HTML和CSS创建“返回TOP”按钮

制作一个固定显示在右下方的按钮

首先，按照右图所示进行“返回TOP”按钮，该按钮固定显示在屏幕的右下方(无论多少都要滚动)。它分为HTML(+ JavaScript)源代码，它提供返回页面顶部的函数和CSS源代码，将其显示为按钮，并按顺序将其固定在屏幕的右下角。

■ 用于创建按钮的HTML源(仅限HTML版本)：HTML使用p元素和元素作为简单链接，如下所示。

▲返回TOP p>

要从脚本中使用它，会附加一个id名称。如果您想在上面的“topbutton”之外设置id名称，请同时修改后续来源中“topbutton”的描述。■ 用于创建按钮的HTML源代码(+ JavaScript版本)：在上面的描述中，需要在页面顶部添加id名称为“top”的一些元素。然而，想法写如下所述添加到onclick属性的脚本，即使他们不准备任何页面的顶部，页面的顶部(动画慢慢滚动)移动我会的。我也在上一页介绍的示例页面中使用了此描述。

■ CSS源显示按钮：通过添加下面的样式表到在上面创建的元件，并且以这样的方式即“屏幕固定在右下角显示” - “按钮Ppoku装修”，“第一非显示状态”。 。每行的含义都是以下面的来源中的注释形式写的，所以请参考它。

如果按原样复制并粘贴上面的CSS源代码，它将显示为示例页面。请更正主要以粗体显示的部分并进行调整，使其成为您选择的着色/显示位置。

无论您滚动多少，它都将固定显示在窗口中的相同位置(右下角)

如果您尝试在浏览器中显示上述源，则不会显示该按钮。因为被“display：none”的指定隐藏了所以。因为要“只有当条件满足时显示”，请使用脚本后，它是不是在初始状态可见。如果仅排除描述(显示属性)并检查显示，则它看起来如右图所示。即使您滚动页面，按钮的显示位置也不会改变，它固定在屏幕的右下方。

2.确定滚动量并编写一个切换按钮显示/不显示的脚本

接下来，让我们编写一个脚本。要描述的脚本如下。虽然稍后将描述细节，但是在以粗体(第6行)写的“350”部分中指定“滚动目的量”。单位是像素(px)。请指定所需的数量并使用它。除此之外，复制和粘贴都没有问题。

$(function(){ //滚动时执行 $(window).roll(function(){ //设置所需的滚动量(px) var TargetPos =350 ; //获取当前滚动位置 var ScrollPos = $(window)。scrollTop(); //确定当前位置是否已达到目标滚动量 if(ScrollPos> = TargetPos){ //显示是否到达 $(“＃topbutton”)。fadeIn(); } 其他{ //如果没有达到隐藏 $(“＃topbutton”)。fadeOut(); } }); });

我将简要解释每行的上述描述的内容。■ 滚动时执行一些处理(第4到18行)：如果要根据浏览器滚动的时间执行某些操作，请使用jQuery编写如下。

$(window).roll(function(){ //描述你想在这里执行的内容});

■ ：为了获取当前的滚动位置(8号线)(从页面顶部到您目前能够看到的位置的距离)，这是在开始一点点的介绍，得到了“当前滚动位置”是，jQuery的我们将如下编写。

var ScrollPos = $(window)。scrollTop();

这里，当前滚动位置存储在变量“ScrollPos”中。此外，单独的“目标滚动量”存储在变量“TargetPos”(第6行)中，并比较这两个变量(TargetPos和ScrollPos)的值(第10行)可以确定它是否超过所需的滚动位置。■ 显示带有“淡入”动画的按钮(第12行)：创建按钮使用id属性(如“id =”topbutton“” )将id元素分配给p元素。要使用“淡入”动画显示此元素，请使用jQuery并按如下方式编写它。

$(“ ＃topbutton”)。fadeIn() ;

当它消失时，它会与“淡入”动画效果一起显示，如果已经显示，它什么都不做。■ 使用“淡出”动画隐藏按钮(第16行)：同样，要使用“淡出”动画进行擦除，请使用jQuery进行如下编写。

$(“ ＃topbutton”)。fadeOut() ;

它在显示时会随着“淡出”动画效果消失，如果已经消失则不会做任何事情。

完成

滚动到一定程度时，会显示“返回TOP”按钮

正如您所看到的，使用jQuery可以非常轻松地“向下滚动并在显示和隐藏按钮之间切换”脚本。使用目前为止引入的所有源创建的示例页面如下所示。→ 根据滚动“回到TOP”。例如，显示按钮的数量中的示例页面的HTML源代码，我已经加入到评论的形式，各位置的含义，请结合本文的讨论阅读。

滚动到一定程度后如何显示“返回TOP”按钮

这一次，我们介绍了一种根据用户的滚动量显示“返回TOP”按钮的方法。您可以看到，您可以使用jQuery轻松缩短滚动位置和切换显示/不显示的过程。在此示例中，我们发布了“返回TOP”按钮，但您可以将其用于各种目的，例如在其他位置发布相关信息列表。

举报/反馈