javascript - 滚动到元素总是重置 View 直到页面刷新-6ren

javascript - 滚动到元素总是重置 View 直到页面刷新

转载作者：行者123 更新时间：2023-11-27 23:59:11

25

4

我目前正在尝试创建一个包含 4 个部分的小型单页网站。首先是一个单一的图像登陆页面，然后是下面的 3 个“关于”部分，它们都应该设置在完整的视口(viewport)中。

我正在尝试使用一些 javascript 以便能够在单击按钮时平滑地滚动到每个部分，但是当我单击按钮时，javascript 事件触发并且页面快速滚动到正确的部分然后返回到起始位置。

我已经尝试了多个版本的 JS 来让它工作，但我认为这可能是其他原因导致的缺陷。

我正在关注 this tutorial .

并尝试使底部文本部分与第一部分相同。

document.getElementById('readMore').addEventListener('click', function() {
  document.getElementById('section-a').scrollIntoView();
});

/* Zero out padding/margin - sets 0 for all CSS styling */

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-style: 17px;
  color: #926239;
  line-height: 1.6;
}

#showcase {
  background-image: url(../img/background.jpg);
  height: 100vh;
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
  padding: 0 20px;
}

#section-a,
#section-b,
#section-c {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  text-align: left;
}

#showcase h1 {
  font-size: 80px;
  line-height: 1.2;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#showcase h2 {
  font-size: 40px;
  line-height: 1.2;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

#section-a,
#section-c {
  padding: 20px;
  background: #926239;
  color: white;
  text-align: center;
}

#section-b {
  padding: 20px;
  background: #fff;
  text-align: center;
}

#seeMore {
  padding: 20px 0px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>firstName lastName</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <link rel="stylesheet" href="public/css/style.css" />
</head>

<body>
  <header id="showcase">
    <h1>firstName lastName</h1>
    <h2>Job Title</h2>
    <div>
      <a href="" id="readMore" class="btn btn-primary">Read More</a>
    </div>
  </header>

  <section id="section-a">
    <div></div>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
  <section id="section-b">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
  <section id="section-c">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur iusto saepe eligendi rem neque esse dolor? Sunt sint illum, numquam reiciendis eum provident cum corporis perspiciatis architecto! Quisquam tenetur quia facilis natus, sed delectus eligendi
      corrupti quae inventore enim omnis rem provident ipsum sit quo, impedit libero sequi laboriosam quas nihil iste cumque corporis illum? Similique dicta perferendis, doloremque consequuntur ab molestiae magnam illo qui numquam nostrum ad quod, enim,
      molestias libero. Quam ad nisi officiis quis ipsam necessitatibus fuga hic, architecto sed, quae harum dicta incidunt culpa veniam reprehenderit sunt ratione vitae molestiae iste sapiente, impedit consequuntur cum perspiciatis?
    </p>
  </section>
</body>
<script src="./public/js/javascript.js"></script>

</html>

一旦我理解了它是如何工作的，我就会在每个部分中设置按钮，让您上下移动这些部分。

最佳答案

您必须防止链接的默认行为。所以你可以这样做:

document
      .getElementById('readMore')
      .addEventListener('click', function(event) {
        event.preventDefault()
        document.getElementById('section-a').scrollIntoView()
      })

但这种方式是不必要的，因为您只需使用普通链接即可获得相同的行为。

关于javascript - 滚动到元素总是重置 View 直到页面刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56092981/

25

4

0

文章推荐： html - '行高 : 1' makes line height shorter than text height

文章推荐： javascript - 无法在 JS 中添加 PHP

java - 为什么 double 总是 8 个字节，而 int 总是 4 个字节，即使 int 有更多位数？
我不明白 int 63823 为何比 double 1.0 占用更少的空间。在这个特定实例中，int 中是否没有存储更多信息？最佳答案 I don't understand how an int 6
ios - (总是)在使用加密来验证用户身份时向美国当局报告？
这可能不是一个直接的代码问题，但它是一个经常出现在 SO 上的问题，我发现阅读它非常有用。 App Store - Help answering “Missing Compliance” (using
css - 如何在下拉框顶部显示下拉列表(总是)
我在我们的应用程序中使用 syncfusion 寻呼机和下拉列表请打开以下链接。 https://stackblitz.com/edit/angular-nv6myv?file=src%2Fapp%2
c++ - *新总是错的。总是
以便解释指针和引用in this question我写了这段代码。 MyClass& MyClass::MyInstance() { static MyClass & myLoca
c++ - 协助避免断言......总是!
在 C 和 C++ 中，assert 是一个非常重量级例程，将错误写入 stdout 并终止程序。在我们的应用程序中，我们实现了一个更强大的 assert 替代品，并为其提供了自己的宏。已尽一切努力
c# - 此请求的授权已被拒绝。总是
我已经创建了一个 MVC webApi 项目，现在我想使用身份验证和授权。我想我已经实现了这种安全措施，但由于某种原因，有些事情变糟了，当我编写我的凭据并尝试调用一些 webApi 方法时，显示消息“
javascript - 向函数添加回调 - 总是
我发现自己使用一种奇怪的方式向我的函数添加回调函数，我想知道是否有更通用的方式向函数添加回调函数，最好的情况是我的所有函数都检查最后给定的作为函数的参数，如果是，则将其用作回调。我以前是这样的: v
git - 总是 `git fetch --all` ？
几乎从来没有我只想获取某个 Remote 的情况；我总是想要所有的 Remote 。我认为这将是一个足够常见的用例，git 会考虑它(与他们有 pull.rebase true 的方式相同)。那么，
jQuery .inArray() 总是 true？
我正在尝试使用 inarray 但它总是返回 true？有任何想法吗？ (所有 li 均已显示) $("#select-by-color-list li").hide(); // get the se
lighttpd mod_secdownload 总是 404
我正在尝试为我公司的开发环境设置过期网址。我们使用 lighttpd在此环境中提供上传的文件，我发现 these docs这似乎相当有希望。问题是我似乎根本无法让它工作，而且我有点不知所措，试图找出
Grails 外部配置。无法访问外部变量。总是[:]
我无法让“文件夹”外部变量工作。我总是得到[:]。我正在 Windows 下的 Grails 上进行开发(这就是为什么外部配置文件看起来像 file:C:\path\to/file)。我在另一个项
haskell - `if-then-else`(总是)可以被函数调用替换吗？
这个问题是出于对 PL 如何工作的好奇，而不是其他任何事情。 (它实际上是在查看与 Haskell 不同的 SML 时想到的，因为前者使用按值调用 - 但我的问题是关于 Haskell。) Haske
verilog - 总是 block 中的for循环
我有一个高速缓存内存模块，我希望它是可字寻址的，但有字节的写使能信号。 always @ (posedge clk) begin //stuff... if(write) begin
java - 匿名类*总是*维护对其封闭实例的引用吗？
我正在处理一些代码，其中一个对象“foo”正在创建另一个对象对象“bar”，并向其传递一个Callable。之后 foo 将返回bar，然后我希望 foo 变得无法访问(即:可用于垃圾收集)。我最初
C# 总是 0 个参数
我已将我的程序与此方法相关联: public static void CreateFileAssociation(string extension, string key, string descri
C opendir 总是 NULL
所以我正在进行目录遍历，但我无法让 opendir 按照我想要的方式工作。它总是无法打开我发送的目录，它给出了一些未知的错误。我通常传入 argv[1]，但我放弃了，只是开始硬编码路径。 char *
java - 从不运行 `if` ，总是 `else`
这个问题在这里已经有了答案: How do I compare strings in Java? (23 个回答) 关闭 9 年前。出于某种原因，我的(基本)程序总是打印我为 else 语句保留的
python - 如何将(总是)时间四舍五入到最接近的十位？
我不想冒为此提出破解的风险，因为它涉及 datetime 对象。基本上，我想按如下方式进行转换: 2010-04-21 06:37:53 -> 2010-04-21 06:40:00 2010-08-
C: fgets 总是 NULL
我正在用 C 语言玩文件 I/O。我正在尝试使用 fgets 从一个文件中读取数据并将其输出到另一个文件。问题是它总是返回 NULL，因此没有任何内容被复制到输出文件中。这是我的代码: #includ
C++:不删除对象/总是/内存泄漏吗？
class MyClass { // empty class with no base class }; int main() { MyClass* myClass = new MyC

首页

博学

6Ren·AI

商城

javascript - 滚动到元素总是重置 View 直到页面刷新