我正在进行网站和浏览器布局，平滑滚动效果很好，但在移动布局中，当我点击链接时，它并没有让我在正确的位置。总是低得多。为什么？ 我已经查看了Smooth Scroll的代码和文档，但我找不到任何错误。
这是我的代码： https://codepen.io/ZeR0ByTe/pen/wrbMRZ
<!DOCTYPE html>
<html lang="es">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- ESTILOS CSS -->
<link href="css/estilo.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<link rel="stylesheet" href="css/blueimp-gallery.min.css">
<!-- scroll -->
<script src="js/smooth-scroll.min.js"></script>
<script src="js/wow.min.js"></script>
<script>
</script>
</link>
</link>
</link>
</meta>
</meta>
</head>
<body>
<header class="d-none d-md-block" >
<div id="sliderFotos" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#sliderFotos" data-slide-to="0" class="active"></li>
<li data-target="#sliderFotos" data-slide-to="1"></li>
<li data-target="#sliderFotos" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url(img/bg-4.jpg">
<div class="carousel-caption d-none d-md-block">
<div class="row">
<div class="col-4 d-flex">
<img class="img-fluid align-self-center logo wow bounceIn" data-wow-duration="1s" src="img/logoSB.png" width="300" height="300" alt="">
</div>
<div class="col-8">
<div class="jumbotron wow bounceIn" data-wow-duration="1s">
<h1 class="display-2 bg-warning">Bienvenidos!</h1>
<p class="lead">Aca iría un primer mensaje de presentación a la página, noticia u otra cosa.</p>
<hr class="m-y-md">
<p>Y se puede complementar con otro texto acá, pero más corto.</p>
<p class="lead">
<a class="btn btn-warning btn-lg" href="#servicio" role="button"><i class="fa fa-arrow-down fa-lg mr-2"></i>Más info
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-7.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 2</h3>
<p>Descripción 2do mensaje.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url(img/bg-5.jpg">
<div class="carousel-caption d-none d-md-block">
<h3>ALGÚN MENSAJE 3</h3>
<p>Descripción 3er mensaje.</p>
</div>
</div>
</div>
<!-- CONTROLES SLIDER -->
<a data-scroll-ignore class="carousel-control-prev" href="#sliderFotos" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a data-scroll-ignore class="carousel-control-next" href="#sliderFotos" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<!-- NAVBAR -->
<nav class="navbar navbar-expand-xl navbar-dark bg-dark sticky-top">
<a class="navbar-brand" href="#">
SBGuardavidas
</img>
</a>
<button aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarSupportedContent" data-toggle="collapse" type="button">
<span class="navbar-toggler-icon">
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav m-auto text-center">
<a class="nav-item nav-link active" data-scroll href="#">
Inicio
</a>
<a class="nav-item nav-link" data-scroll href="#nosotros">
Nosotros
</a>
<a class="nav-item nav-link" href="#">
Publicidad
</a>
<li class="nav-item dropdown">
<a aria-expanded="false" aria-haspopup="true" class="nav-link dropdown-toggle" data-toggle="dropdown" href="" id="navbarDropdownMenuLink">
Eventos
</a>
<div aria-labelledby="navbarDropdownMenuLink" class="dropdown-menu">
<a class="dropdown-item" data-scroll href="#conciencia">
PROYECTO +CONCIENCIA
</a>
<a class="dropdown-item" data-scroll href="#">
Antorchada
</a>
<a class="dropdown-item" data-scroll href="#">
Competencias
</a>
</div>
</li>
<a class="nav-item nav-link" data-scroll href="#galeria">
Galería
</a>
<a class="nav-item nav-link" data-scroll href="#contacto">
Contacto
</a>
</ul>
<div class="d-flex flex-row justify-content-center">
<a class="mr-2 mx-2" href="#">
<i class="fa fa-2x fa-facebook-official" aria-hidden="true"></i>
</a>
<a class="" href="#">
<i class="fa fa-2x fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
</nav>
<!-- FIN NAVBAR -->
<!-- NOTICIAS -->
<section class=" d-flex justify-content-center align-content-center flex-wrap iconos" >
<div class="container-fluid" >
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="" id="servicio" >
SIEMPRE A TU SERVICIO
</h2>
<hr>
</div>
</div>
</div>
<div class="container my-5">
<div class="row ">
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.2s">
<div class="">
<i class="fa fa-5x fa-binoculars text-danger sr-icons">
</i>
<h3>
Seguridad
</h3>
<p class="text-muted">
A tu cuidado en la playa, continuamente vigilando.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.4s">
<div class="service-box">
<i class="fa fa-5x fa-handshake-o text-danger fa-fw">
</i>
<h3>
Confianza
</h3>
<p class="text-muted">
Trabajamos en equipo para un mejor resultado.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.6s">
<div class="service-box">
<i class="fa fa-5x fa-globe text-danger sr-icons">
</i>
<h3>
Medio Ambiente
</h3>
<p class="text-muted">
Protegemos, concientizamos y educamos.
</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-duration="0.8s">
<div class="service-box">
<i class="fa fa-5x fa-heart text-danger sr-icons">
</i>
<h3>
Pasión
</h3>
<p class="text-muted">
Amamos lo que hacemos.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- FIN NOTICIAS -->
<!-- NOSOTROS -->
<div class="container-fluid nosotros d-flex justify-content-center align-items-center" >
<div class="row">
<div class="col-sm-12">
<h2 class="text-center" id="nosotros">
NOSOTROS
</h2>
<hr>
<p class="lead text-center">
Conocenos un poco más...
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
<p class="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias iste explicabo consectetur mollitia aperiam unde dolor molestias quasi, fuga ipsam incidunt fugiat, quia molestiae eveniet. Aspe
</p>
</div>
<div class="col-sm-12 col-md-6 p-4">
<img alt="" class="img-fluid" src="img/equipo.jpg">
</img>
</div>
</div>
</div>
<!-- FIN NOSOTROS -->
<!-- +CONCIENCIA -->
<div class="container-fluid" >
<div class="row ">
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center conciencia-izquierda ">
<img alt="" class="img-fluid" width="400" height="400" src="img/logoSB.png">
</img>
</div>
<div class="col-sm-12 col-md-6 d-flex justify-content-center align-items-center flex-wrap conciencia-derecha">
<h2 class="" id="conciencia">
PROYECTO +CONCIENCIA
</h2>
<div class="col-md-12">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, temporibus, animi. Nesciunt fugit unde voluptates cum, aut, quia, doloribus laborum inventore quam nemo repudiandae veniam? Sapiente tempora iusto suscipit quae at eligendi nobis odit voluptatibus quos perspiciatis, assumenda deserunt modi enim minima numquam facilis quis dignissimos, molestias veniam culpa amet!
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem et cumque, aliquid. Magnam sapiente aliquam repellat dolorum harum,Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas dignissimos aut dolorum aliquam minus, rerum.
</p>
</div>
</div>
</div>
</div>
<!-- FIN CONCIENCIA -->
<!-- GALERIA -->
<div class="container-fluid galeria d-flex align-items-center">
<div class="row ">
<div class="col-md-12">
<h2 class="text-center text-white" id="galeria">
GALERÍA
</h2>
<hr>
<p class="lead text-center text-white">
Un poco de nuestros momentos...
</p>
</div>
<!-- The container for the list of example images -->
<div id="links" class="text-center p-2">
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
<a href="img/road.jpg" title="Banana" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/road.jpg" alt="Banana">
</a>
<a href="img/shelter.jpg" title="Apple" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/shelter.jpg" alt="Apple">
</a>
<a href="img/sea.jpg" title="Orange" data-gallery>
<img class="img-fluid" width="150" height="300" src="img/sea.jpg" alt="Orange">
</a>
</div>
<!-- The Gallery as lightbox dialog, should be a child element of the document body -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
</div>
</div>
</div>
</div>
<!-- FIN GALERIA -->
<!-- SPONSORS -->
<div class="container-fluid bg-warning sponsors d-none d-lg-block">
<div class="row">
<div class="col-12">
<h2 class="text-center text-white">MARCAS QUE NOS APOYAN</h2>
<hr>
<p class="lead text-center text-white">
Cada temporada confían en nosotros...
</p>
<div class="col-12 owl-carousel owl-theme">
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-2.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-3.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="" src="img/partner-1.png" alt="Effacy partner">
</div>
<div class="item my-3">
<img class="img-fluid center-block" src="img/partner-2.png" alt="Effacy partner">
</div>
</div>
</div>
</div>
</div>
<!-- FIN SPONSORS -->
<!-- CONTACTO -->
<div class="container" >
<div class="row d-flex justify-content-center align-content-center contacto">
<div class="col-12">
<h2 class="text-center" id="contacto">CONTACTO</h2>
<hr>
<p class="lead text-center mb-5">
Comunicate con nosotros ante cualquier duda.
</p>
</div>
<div class="row justify-content-center">
<!-- MENSAJE DE ENVIO Y ERROR PHP -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Mensaje enviado correctamente.</strong> En poco tiempo te respodemos. ¡Muchas gracias!
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Error, hubo un problema.</strong> Intentalo otra vez. ¡Muchas gracias!
</div>
<!-- FIN MENSAJE DE ENVIO Y ERROR PHP -->
</div>
<!-- FORM LADO IZQUIERDO -->
<div class="col-md-12 col-lg-4">
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Nombre">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input class="form-control" type="text" placeholder="E-mail">
</div>
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-mobile fa-fw"></i></span>
<input class="form-control" type="text" placeholder="Celular">
</div>
</div>
<!-- FORM LADO DERECHO -->
<div class="col-md-12 col-lg-8">
<div class="input-group mb-3">
<span class="input-group-addon"><i class="fa fa-commenting fa-fw"></i></span>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="6" placeholder="Escriba su mensaje..."></textarea>
</div>
</div>
<button type="submit" class="btn btn-success align-s"><i class="fa fa-paper-plane fa-lg mr-2"></i>Enviar</button>
<button type="reset" class="btn btn-danger align-s"><i class="fa fa-trash-o fa-lg mr-2"></i>Borrar</button>
<!-- BOTON MOSTRAR MAPA DE SB -->
<button id="mapa" type="button" class="btn btn-lg btn-block btn-warning mt-5" data-toggle="modal" data-target="#mostrarMapa">Mapa de San Bernardo</button>
<!-- MODAL MAPA DE SB -->
<div class="modal fade" id="mostrarMapa" tabindex="-1" role="dialog" aria-labelledby="modalLabelLarge" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="modalLabelLarge">Mapa de San Bernardo - Horarios ENERO / FEBRERO</h4>
</div>
<div class="modal-body">
<img class="img-fluid" src="img/mapa2.png">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- FIN CONTACTO -->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.js"></script>
<script src="js/blueimp-gallery.js"></script>
<script src="js/jquery.blueimp-gallery.js"></script>
<script>$(document).ready(function(){
// Animacion Scroll (animate.css)
new WOW().init();
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
// Speed & Easing
speed: 2000, // Integer. How fast to complete the scroll in milliseconds
offset: 0, // Integer or Function returning an integer. How far to offset the scrolling anchor location in pixels
easing: 'easeInOutQuart', // Easing pattern to use
});
// COMIENZO CARROUSEL
$(".owl-carousel").owlCarousel({
items:8,
loop: true,
margin: 30,
autoplayTimeout:1500,
center: true,
autoplay: true,
autoplayHoverPause:true,
autowidth: false,
responsiveClass:true,
responsive:{
0:{
items:1,
nav:true
},
600:{
items:3,
nav:false
},
1000:{
items:8,
nav:true,
}
}
});
$('.navbar-nav>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>.dropdown>.dropdown-menu>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
});
// comienzo isotope
// fin isotope
</script>
</body>
</html>
- （抱歉我的英文） - （平板电脑布局尚未准备好）
谢谢！
答案 0 :(得分：0)
最后，朋友可以解决问题，所以我会分享解决方案以防其他人为他服务。
我已经删除了JS库SmoothScroll以及启动它的代码。
// SmoothScroll
var scroll = new SmoothScroll('a[href*="#"]', {
speed: 2000,
offset: 0,
easing: 'easeInOutQuart', // Easing pattern to use
});
我替换了这个：
$('a[href*="#"]')
.not('[href="#"]')
.not('[href="#0"]')
// Remove links that don't actually link to anything
.click(function(event) {
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
var scrollTop = target.offset().top - $('.sticky-top').height();
$('html, body').animate({
scrollTop: scrollTop
}, 1000)
}
}
});
上面的代码适合我需要的，但它是基于这个： https://css-tricks.com/snippets/jquery/smooth-scrolling/
再次感谢和抱歉我的英语。
答案 1 :(得分：0)
我设法通过在移动窗口宽度时使用不同的偏移值来解决此问题
const options = {
speed: 500,
speedAsDuration: true,
offset: window.innerWidth < 768 ? 400 : 90
}
new SmoothScroll('a[href*="#"]', options);
问题似乎是在移动设备中，库需要更高的偏移值，这可能是因为元素的尺寸与桌面上的尺寸不完全相同。
希望这可以帮助您或某人。
问候