从另一个页面导航到 Bootstrap Accordion [英] Navigate to Bootstrap Accordion from Another Page

问题描述

我创建了一个包含多页内容的资源站点.每页有 20-30 个 Bootstrap 手风琴.单击时，手风琴会展开以显示有关给定资源的附加信息.

I have created a resources site that has multiple pages of content. Each page has 20-30 Bootstrap accordions. When clicked the accordions expand to display additional information about the given resource.

我的目标是让主页拥有特色资源"，点击后将导航到该页面并打开请求的手风琴.我想使用 # 进行导航 (site.com/page.html#featured-resource)

My goal is for the homepage to have "Featured Resources" that when clicked will navigate to the page and open the requested accordion. I'd like to use a # to navigate (site.com/page.html#featured-resource)

以下脚本允许我使用主题标签导航到页面并打开请求的手风琴，但实际上不会滚动到页面的该部分.

The following script allows me to navigate to the page using a hashtag and open the requested accordion, but does not actually scroll to that part of the page.

 $(document).ready(function () {
 location.hash && $(location.hash + '.collapse').collapse('show');
 });

我希望这不仅可以打开手风琴，还可以滚动到页面的那部分.我将如何做到这一点?

I would like for this to not only open the accordion, but to scroll to that part of the page as well. How would I make this happen?

谢谢！

推荐答案

试试下面的

$(document).ready(function(){
  var posTop = $(location.hash + '.collapse').offset().top;
  $('html,body').animate({
      scrollTop: posTop - 20; //where 20 is allowance from top of the page
   });
});

这篇关于从另一个页面导航到 Bootstrap Accordion的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！