草庐IT

html - anchor 链接从固定在顶部的标题下方开始

coder 2023-08-01 原文

我有一个页面，顶部有一个固定的标题，高度为 63 像素。 在此下方我有页面的不同部分(div)，它们实际上是单独的页面。 每个部分都在标题中链接为相关 div id 的 anchor 链接。 我遇到的问题是，当单击 anchor 链接时，div 的顶部就从文档顶部开始，而不是在标题下方。 任何解决方案都会非常有帮助。

标题的 CSS 代码:

#headercontainer{
position:fixed;
background-color:#1a1813; 
top:0px;
left:0px;
width:100%;
height:63px;
z-index:1;}

#headercontent{
position:relative;
background-image:no-repeat; 
top:0px;
left:0px;
width:1280px;
margin-left:auto;
margin-right:auto;}

第一部分的 CSS 代码(单击 anchor 时应位于标题下方:

#landingcontainer{
margin-top:63px;
position:relative;
width:100%;
height:700px;
background-color:#000000;}

#landingcontent{
position:relative;
width:1280px;
height:700px;
margin-left:auto;
margin-right:auto;
background-image:url("../images/landing/landing_bg.png");
background-repeat:no-repeat;

HTML 达到需要的程度:

<!-- START BODY CONTAINER -->
<div id="bodycontainer">
    <!-- START HEADER -->
    <div id="headercontainer">
        <!-- START HEADER CONTENT -->
        <div id="headercontent">
            <div id="headerbg">
                <a href="#landingcontainer"><div id="headerlogo"></div></a>
                <div id="headercard"></div>
                <div id="headernavigation">
                    <ul>
                        <a href="#menucontainer"><li>Menu</li></a>
                        <li>Sauces</li>
                        <li>Ranches</li>
                        <li>Order</li>
                        <li>Franchise</li>
                        <li>About</li>
                    </ul>
                </div>
                <div id="headersociallinks"></div>
            </div>
        </div>
        <!-- END HEADER CONTENT -->
    </div>
    <!-- END HEADER -->

    <!-- START LANDING SECTION -->
    <div id="landingcontainer">

最佳答案

我有一个更好的解决方案来解决这个问题。

• 首先在css 中创建一个类(随便起什么名字)

.anchor{
   display:block;
   height:63px; /* this is the height of your header */
   margin-top:-63px; /* this is again negative value of the height of your header */
   visibility:hidden;
}

• 在 HTML 中，就在您实际的 div 部分开始之前，例如我的是 #landingcontainer 您应该添加一个 span 标签，其中包含 anchor 类(我们在上面制作的)和任何 id你要。对我来说，我这样做了:

<span class="anchor" id="landing"></span>

那么实际链接现在将不会链接到您要将它们带到的部分的实际 div id，而是必须在链接中给出 span 标签的 id。 

<a href="#landing">HOME</a>

就在这里!

我们在这里所做的实质上是让浏览器在 span 开始的地方停止，这恰好是标题的高度，然后让查看者变得不明智;)

关于html - anchor 链接从固定在顶部的标题下方开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13036142/

anchorhtmlgtltdivcss

有关html - anchor 链接从固定在顶部的标题下方开始的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  4. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  6. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  7. ruby-on-rails - Prawn - 表格单元格内的链接 - 2

    我正在尝试用Prawn生成PDF。在我的PDF模板中，我有带单元格的表格。在其中一个单元格中，我有一个电子邮件地址:cell_email=pdf.make_cell(:content=>booking.user_email,:border_width=>0)我想让电子邮件链接到“mailto”链接。我知道我可以这样链接:pdf.formatted_text([{:text=>booking.user_email,:link=>"mailto:#{booking.user_email}"}])但是将这两行组合起来(将格式化文本作为内容)不起作用:cell_email=pdf.make_c

  8. Observability：从零开始创建 Java 微服务并监控它 （二） - 2

    这篇文章是继上一篇文章“Observability：从零开始创建Java微服务并监控它（一）”的续篇。在上一篇文章中，我们讲述了如何创建一个Javaweb应用，并使用Filebeat来收集应用所生成的日志。在今天的文章中，我来详述如何收集应用的指标，使用APM来监控应用并监督web服务的在线情况。源码可以在地址 https://github.com/liu-xiao-guo/java_observability 进行下载。摄入指标指标被视为可以随时更改的时间点值。当前请求的数量可以改变任何毫秒。你可能有1000个请求的峰值，然后一切都回到一个请求。这也意味着这些指标可能不准确，你还想提取最小/

  9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  10. python - 是否可以使用 Ruby 或 Python 禁用 anchor /引用来发出有效的 YAML？ - 2

    是否可以在PyYAML或Ruby的Psych引擎中禁用创建anchor和引用(并有效地显式列出冗余数据)？也许我在网上搜索时遗漏了一些东西，但在Psych中似乎没有太多可用的选项，而且我也无法确定PyYAML是否允许这样做.基本原理是我必须序列化一些数据并将其以可读的形式传递给一个不是真正的技术同事进行手动验证。有些数据是多余的，但我需要以最明确的方式列出它们以提高可读性(anchor和引用是提高效率的好概念，但不是人类可读性)。Ruby和Python是我选择的工具，但如果有其他一些相当简单的方法来“展开”YAML文档，它可能就可以了。 最佳答案

随机推荐