javascript - 打开时滚动到引导 Accordion 的顶部-6ren

javascript - 打开时滚动到引导 Accordion 的顶部

转载作者：行者123 更新时间：2023-11-30 09:16:21

26

4

<分区>

我最近一直在开发一个小型博客，并希望可以从 accordion 中访问连续的博客文章。 (下面的例子)。这样，您可以快速浏览帖子标题，选择一个有趣的帖子并阅读。完成后，您可以无缝返回浏览，无需不必要的菜单导航。

我的问题是，一旦您读完一篇文章并点击第二篇文章，我无法让第二篇文章在顶部打开，并且标题可见。由于您已经向下滚动阅读了第一篇文章，因此您打开了第二篇文章的 2/3。这迫使用户一直滚动回到他尚未阅读的帖子的顶部。出于某种原因，我似乎什么都做不了；任何指导将不胜感激!

更新:事实证明，由于我使用的是 jQuery 的精简版，因此我尝试使用的功能不可用。现在我已经克服了这个障碍，一切都可以编译，但我不能强制页面滚动到正确的位置。

我最接近的解决方案是这个，它会在打开新部分时向上滚动到第一个 card-header (而我想要的是 card-header点击)。

$(".card-header").click(function (event) {                                      
    $('html, body').animate({                                                   
        scrollTop: $(".card-header").offset().top                               
    }, 300);                                                                    
});

我正在尝试做的在逻辑上等同于此，但这段确切的代码根本不会滚动(它编译正确，并将 $(this) 替换为 $( event.target) 或 $(event.target).parent() 也不起作用。

$(".card-header").click(function(event) {                                                                           
    $('html, body').animate({                                                   
        scrollTop: $(this).offset().top-60                     
    }, 300);

这里有一个最小的工作示例来重现我的挣扎:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container" id="container">
  
  <div class="card">                                          
    <a class="card-header" data-toggle="collapse" href="#sec1">Title1</a>
    <div id="sec1" class="collapse" data-parent="#container">  
      <div class="card-body">                             
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
      </div>                                              
    </div>                                                  
  </div>
  
  <div class="card">                                          
    <a class="card-header" data-toggle="collapse" href="#sec2">Title2</a>
    <div id="sec2" class="collapse" data-parent="#container">  
      <div class="card-body">                             
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
        lots and lots of text
      </div>                                              
    </div>                                                  
  </div>
  
</div>

26

4

0

文章推荐： javascript - 对象数组，按对象键 :value 分组

文章推荐： python - 分离动态结构化数据

文章推荐： java - 带有通配符的泛型声明

文章推荐： python - pytorch对图片进行编码和解码

android - 如何在 android 中的单个 ImageView 中添加两个渐变(顶部-底部和底部-顶部)？
我正在尝试向图像顶部和底部的 ImageView 添加渐变。我不想在 ImageView 之上添加 TextView 。我该如何实现？最佳答案看来您简单而干净的解决方案是用 FrameLayout
PowerShell - 排序、顶部
我可以寻求帮助吗，我有日期 - “公司名称”和“日期”，例如 $value |"Comp Name"| "Date" | |:----------|----------:| |computer
sql - 左加入最大值/顶部
我有两个表，我试图从中运行查询以返回每个人的最大(或最高)交易。我应该注意，我无法更改表结构。相反，我只能拉数据。人 +-----------+| id | name |+-----------+|
c++ - 关闭管道时收到双重释放或损坏(顶部)？
所以我有一个用管道打开的 n 个流的数组，但是使用 gdb，我发现当我尝试关闭流或管道的写入端时程序失败。我可以很好地写入管道，但关闭它们不起作用。我在程序上运行 valgrind，它所做的只是打印出
ios - 如何创建一个标签栏出现在左边而不是底部/顶部？
大家好，这是我的难题。我正在尝试创建一个标签栏，该标签栏从上到下锚定在左侧，而不是从左到右锚定在底部。我创建了一个工具栏项目，将栏准确地放置在我想要的位置，但我希望选项卡栏相同，具有相同的功能，当然除
html - 如何停止标题中的菜单(顶部)
http://jsfiddle.net/GuXQZ/3/ header slideshow lates Content
jquery - 顶部 slider
我的图片出了点问题，我无法解决这个问题。这是我的代码.. HTML HIDE CSS #ads { -webkit-border-bottom-right-r
css - 顶部/底部填充溢出滚动一般屏幕
我有一个包含 3(css 网格)列的设计。第二列有嵌套的网格内容需要垂直滚动，而其他两列保持各自的高度。我给第二个嵌套列一个溢出，但我还需要给它一个顶部和底部填充或边距。我的解决方案没有顶部/底部填充
ios - 顶部/底部位置的UIToolbar外观界面
我在 View 中有两个 UIToolbar，分别在顶部和底部。我正在尝试在 iOS 版本中一致地应用外观。从 iOS5 开始有这个 setBackgroundImage: forToolbarPos
javascript - 在javascript中获取div位置(顶部)？
一个 div 我使用 top:-26px; 在 css 中设置高度。我有其他 div 其他地方我想与那个 div 对齐。我注意到在 jquery 中编写 .css('top') 得到了我的 css 而
jquery 追加到列表的前面/顶部
我有这个无序列表 two three 有没有一种方法可以将无序列表添加到无序列表的前面，使其像这样结束？ ONE two three 请注意“ONE”已添加到列表
viewport - 检测鼠标何时离开视口(viewport)顶部？
我想检测鼠标何时离开顶部的视口(viewport)(可以说是向北)。我在网上搜了下How can I detect when the mouse leaves the window? .是一个好的开始
postgresql - 顶部 PostgreSQL 命令中括号中的数字
运行顶级命令top -c在 Ubuntu 服务器上显示当前正在运行的所有命令。关于 PostgreSQL 命令，括号中的值是什么意思？我说的是图片中红色框旁边的值。最佳答案我找不到任何文档来支持这
gtk3 - GtkTextView 顶部/底部边距？
我想知道将顶部和底部边距添加到 GtkTextView 的正确且普遍接受的方法位于 GtkScrolledWindow 内.有设置左右边距的功能，我正在使用: gtk_text_view_set_le
Vulkan 顶部/管道底部和 ALL_COMMANDS
作为很多“初学者”，我认为使用 TOP_OF_PIPELINE 作为 dst 和 BOTTOM_OF_PIPELINE 作为 src 意味着 ALL_COMMANDS 两者。 Here Nicol B
javascript - 如何确定滚动浏览器窗口底部是否已到达 DIV 顶部？
我正在尝试使用 jQuery/Javascript 解决这个问题: 当浏览器向下滚动且窗口底部到达页脚 DIV 顶部时，执行 CSS 代码更改。问题示例: https://elodywedding.
javascript - 访问范围输入值以将其显示在 slider 顶部
我想使用范围 slider 来选择一个值并将该值呈现在 Angular 中的范围选择器顶部。我的html代码是: Raio: {{raio}} metros 在我的 co
javascript - 将图像元素放置在 Canvas 顶部
我想将手的图片放在靠近脸部的黑色 Canvas 上。这可以吗？有没有办法确定图片的位置？这是我的代码: var canvas; var canvasContext; window
macos - 管道和 xargs => 顶部
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this
macos - 管道和 xargs => 顶部
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题吗？ Update the question所以它是on-topic用于堆栈溢出。关闭 9 年前。 Improve this

首页

博学

6Ren·AI

商城

javascript - 打开时滚动到引导 Accordion 的顶部