我正在用html、css和javascript编写一个代码，但我不知道如何将锚链接与实际页面对齐。有人能告诉我怎么做吗？
如果您看到下面的代码，您会注意到，当我单击锚链接时，它会将您带到正确的位置，但是导航栏本身会隐藏部分内容，我不知道如何向其添加某种偏移。
我所做的“解决”这个问题的方法是在页面的每个部分添加填充，这使它看起来很不错，但是你仍然可以清楚地看到，在这一点之前，这些部分是分开的，这使它看起来很难看。
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Title</title>
<!-- Font Awesome icons (free version)-->
<!-- I THINK IT'S ALREADY IN THE CSS FILE-->
<!-- Collapsibles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Old Standard TT' rel='old-standard-font'>
</head>
<body id="page-top">
<!-- Responsive navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-darker fixed-top py-3" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="#page-top">Title</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="#bg-bio">Biografía</a></li>
<li class="nav-item"><a class="nav-link" href="#bg-musica">Música</a></li>
<li class="nav-item"><a class="nav-link" href="#bg-media">Galería</a></li>
<li class="nav-item"><a class="nav-link" href="#bg-contacto">Redes Sociales</a></li>
</ul>
</div>
</div>
</nav>
<!-- Masthead-->
<header class="masthead bg-primary text-white text-center">
<div class="container d-flex align-items-center flex-column h-100">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<h1 class="text-white font-beba">Title</h1>
<hr class="divider-light" />
</div>
<div class="col-lg-8 align-self-baseline">
<h2 class="text-white mb-5">Guitarrista - Cantante - Compositor</h2>
</div>
</div>
</div>
</header>
<!-- bio Section-->
<section class="page-section text-dark mb-0" id="bg-bio">
<div class="container">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<hr>
<h1 class="font-beba">Biografia</h1>
<hr>
<h2> Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text Sample text </h2>
</div>
</div>
<img class="bg-bio">
</div>
</section>
<!-- Musica Section-->
<section class="page-section text-dark mb-0" id="bg-musica">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<hr>
<h1 class="font-beba">Musica</h1>
<hr>
<ul class="list-group" id="myUL">
<button type="button" class="btn btn-primary list-group-item list-group-item-action" data-toggle="collapse" data-target="#demo1"><h3>Cancion 1</h3></button>
<div id="demo1" class="collapse">
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<hr>
<h5><a class="link-primary nounderline" href="">Bandcamp</a></h5>
<h5><a class="link-primary nounderline" href="">Spotify</a></h5>
<h5><a class="link-primary nounderline" href="">YouTube</a></h5>
<hr>
</div>
<button type="button" class="btn btn-primary list-group-item list-group-item-action" data-toggle="collapse" data-target="#demo2"><h3>Cancion 2</h3></button>
<div id="demo2" class="collapse">
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<hr>
<h5><a class="link-primary nounderline" href="">Bandcamp</a></h5>
<h5><a class="link-primary nounderline" href="">Spotify</a></h5>
<h5><a class="link-primary nounderline" href="">YouTube</a></h5>
<hr>
</div>
<button type="button" class="btn btn-primary list-group-item list-group-item-action" data-toggle="collapse" data-target="#demo3"><h3>Cancion 3</h3></button>
<div id="demo3" class="collapse">
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<hr>
<h5><a class="link-primary nounderline" href="">Bandcamp</a></h5>
<h5><a class="link-primary nounderline" href="">Spotify</a></h5>
<h5><a class="link-primary nounderline" href="">YouTube</a></h5>
<hr>
</div>
<button type="button" class="btn btn-primary list-group-item list-group-item-action" data-toggle="collapse" data-target="#demo4"><h3>Cancion 4</h3></button>
<div id="demo4" class="collapse">
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<hr>
<h5><a class="link-primary nounderline" href="">Bandcamp</a></h5>
<h5><a class="link-primary nounderline" href="">Spotify</a></h5>
<h5><a class="link-primary nounderline" href="">YouTube</a></h5>
<hr>
</div>
<button type="button" class="btn btn-primary list-group-item list-group-item-action" data-toggle="collapse" data-target="#demo5"><h3>Cancion 5</h3></button>
<div id="demo5" class="collapse">
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<br>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<h4>Letra de cancion</h4>
<hr>
<h5><a class="link-primary nounderline" href="">Bandcamp</a></h5>
<h5><a class="link-primary nounderline" href="">Spotify</a></h5>
<h5><a class="link-primary nounderline" href="">YouTube</a></h5>
<hr>
</div>
</ul>
</div>
</div>
</div>
</section>
<!-- Media Section-->
<section class="page-section bg-dark text-light mb-0" id="bg-media">
<div class="container">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center text-center">
<div class="col-lg-8 align-self-end">
<hr>
<h1 class="font-beba">Galeria</h1>
<hr>
Sample Text Sample Text Sample Text Sample Text Sample Text
</div>
</div>
</div>
</section>
<!-- Contact Section-->
<section class="page-section text-dark mb-0 text-center" id="bg-contacto">
<div class="container">
<div class="row gx-4 gx-lg-5 h-100 align-items-center justify-content-center">
<div class="col-lg-5">
<hr>
<h1 class="font-beba">Sigueme en mis Redes Sociales</h1>
<hr>
<br>
<div class="footer-social-icons">
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-spotify"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-github"></i></a></li>
</ul>
</div>
<br>
</div>
</div>
</div>
</section>
<!-- Copyright Section-->
<div class="copyright py-4 text-center bg-dark text-white">
<div class="container"><small>Copyright © Your Website 2021</small></div>
</div>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<!-- * * SB Forms JS * *-->
<!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
<script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>
</html>javascript:
/*!
* Start Bootstrap - Bare v5.0.2 (https://startbootstrap.com/template/bare)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-bare/blob/master/LICENSE)
* /
// This file is intentionally blank
// Use this file to add JavaScript to your project
/*!
* Start Bootstrap - Freelancer v7.0.3 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
* /
//
// Scripts
//
function gotoHash('#mainNav') {
setTimeout(function() {
var $target = $('#mainNav'),
scrollOffset = 100,
y = $target.offset().top - scrollOffset;
if ($target.length) {
window.scrollTo(0, y);
}
});
}
$('a[href^="#"]').on('click', function() {
gotoHash($(this).attr('href'));
});
$(document).ready(function() {
gotoHash(location.hash);
});
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
window.onclick = function(event) {
if (!event.target.matches('.navbar-toggler')) {
var dropdowns = document.getElementsByClassName("collapse navbar-collapse");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
function searchFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("search");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
var scrollOffset = 175;
$('a.nav-link').on('click', function(event) {
var $target = $(targetId);
console.log($(this).attr('href'));
if( $target.length ) {
event.preventDefault();
window.scrollTo(0, $target.offset().top - scrollOffset);
}
})由于字符限制，无法上载css，但可以在此处找到完整代码：https://codepen.io/devicegucci/pen/bgwwvzd
注意：我是一个初学者，上面的css代码非常糟糕，因为我从很多模板中复制和粘贴了不同的部分，并且修改了其中的一些部分。
1条答案
按热度按时间zfciruhq1#
欢迎试试这个：
据我所知，这只会打断你的页面顶部锚，这并不奇怪，因为它的位置在身体外部。您可以将该id移动到另一个元素。