在索引中，我有一个导航菜单，可以将我带到网站的每个页面。一旦我点击并访问该页面，一切看起来都很完美。
index.html导航代码
<nav class="masthead-menu" id="masthead-menu">
<ul class="masthead-menu__list">
<li class="masthead-menu__item"><a class="current" href="index.html">Home</a></li>
<li class="masthead-menu__item"><a href="tratamientos.html">Tratamientos</a></li>
<li class="masthead-menu__item"><a href="profesionales.html">Profesionales</a></li>
<li class="masthead-menu__item"><a href="clinica.html">La Clínica</a></li>
<li class="masthead-menu__item"><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
然后我在索引中有一系列链接，每个链接都会将我带到位于索引不同页面的不同选项卡，这就是tratamientos。 HTML
index.html中的链接代码
<article class="service">
<div class="service-content">
<h3 class="service-title">Implantología</h3>
<p class="service-excerpt">La pérdida de piezas, provoca disfunciones en los dientes y genera graves problemas bucodentales.</p>
<a href="tratamientos.html#tab-1" class="btn-link">Saber Más</a>
</div>
<img src="images/implantologia_700.jpg" alt="Implantología" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Endodoncia</h3>
<p class="service-excerpt">La endodoncia se aplica cuando la pulpa dental enferma (se inflama) como consecuencia de una caries profunda, una enfermedad periodontal, un traumatismo, etc.</p>
<a href="tratamientos.html#tab-2" class="btn-link">Saber Más</a>
</div>
<img src="images/endodoncia_700.jpg" alt="Endodoncia" class="service-img service-img__left">
</article>
<article class="service">
<div class="service-content">
<h3 class="service-title">Periodoncia</h3>
<p class="service-excerpt">La enfermedad periodontal afecta a las encías y al ligamento que sujeta los dientes a los maxilares.</p>
<a href="tratamientos.html#tab-3" class="btn-link">Saber Más</a>
</div>
<img src="images/periodoncia_700.jpg" alt="Periodoncia" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Conservadora</h3>
<p class="service-excerpt">Abarca la prevención, diagnóstico y tratamiento de la caries dental desde la mínima destrucción de tejido hasta las grandes restauraciones.</p>
<a href="tratamientos.html#tab-4" class="btn-link">Saber Más</a>
</div>
<img src="images/conservadora_700.jpg" alt="Conservadora" class="service-img service-img__left">
</article>
<article class="service">
<div class="service-content">
<h3 class="service-title">Estética Dental</h3>
<p class="service-excerpt">Hoy en día, la sonrisa es una parte importante de nuestra imagen de cara a otras personas. Además, la sonrisa puede llegar a ser importante en algunas profesiones.</p>
<a href="tratamientos.html#tab-5" class="btn-link">Saber Más</a>
</div>
<img src="images/estetica_700.jpg" alt="Estética Dental" class="service-img">
</article>
<article class="service">
<div class="service-content service-content__left">
<h3 class="service-title">Ortodoncia</h3>
<p class="service-excerpt">Gracias a las ortodoncias podemos corregir el posicionamiento en los arcos dentales de forma que se pueda masticar correctamente y configurar una estética optima.</p>
<a href="tratamientos.html#tab-6" class="btn-link">Saber Más</a>
</div>
<img src="images/ortodoncia_700.jpg" alt="Ortodoncia" class="service-img service-img__left">
</article>
这是tratamientos.html中的代码
<div class="tabs tabs--lg">
<ul class="tabs__list">
<li class="tabs__item tabs__item--active">
<a href="#tab-1" class="tabs__link">Implantología</a>
</li>
<li class="tabs__item">
<a href="#tab-2" class="tabs__link">Endodoncia</a>
</li>
<li class="tabs__item">
<a href="#tab-3" class="tabs__link">Periodoncia</a>
</li>
<li class="tabs__item">
<a href="#tab-4" class="tabs__link">Conservadora</a>
</li>
<li class="tabs__item">
<a href="#tab-5" class="tabs__link">Estética Dental</a>
</li>
<li class="tabs__item">
<a href="#tab-6" class="tabs__link">Ortodoncia</a>
</li>
</ul>
<div class="tabs__content">
<div id="tab-1" class="tabs__area tabs__area--active">
<div class="panel-row">
<div class="panel-row__text">
<h3>Implantología Dental</h3>
<p>La implantología dental es la disciplina de la odontología que tiene como objetivo sustituir dientes perdidos mediante la colocación quirúrgica de un implante en el hueso maxilar o mandibular.</p>
<p>Los implantes dentales pueden ser de diferentes tamaños, superficies y materiales. Sobre los implantes se diseñan las rehabilitaciones protéticas que van a permitir restituir las funciones masticatorias, fonéticas y estéticas del paciente.</p>
<p>La elección del tipo de implante se realiza en función del diagnóstico, pronóstico y del plan de tratamiento interdisciplinario entre el odontólogo general con un especialista en cirugía, periodoncia y prostodoncia.</p>
<p>Actualmente la mayoría de los implantes intraóseos se fabrican con materiales altamente biocompatibles como el titanio, que le permite una unión al hueso biológicamente estable denominada osteointegración.</p>
</div>
<div class="panel-row__img">
<img src="images/implante_dental.jpg" alt="Implante dental">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Cirugía Oral</h3>
<p>La cirugía del tercer molar o muela del juicio es la más frecuente. Su exodoncia se realiza en los casos en los que dan sintomatología (dolor agudo, infecciones de repetición, caries en los segundos molares por dificultad de higiene, etc) o se encuentra algún signo radiológico patológico (algún quiste o erosión de raíces de otras piezas).</p>
</div>
<div class="panel-row__img">
<img src="images/cirugia_dental.jpg" alt="Cirugía dental">
</div>
</div>
</div>
<div id="tab-2" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Endodoncia</h3>
<p>En el caso de dientes severamente afectados por diversas circunstancias como pueden ser caries profundas, traumatismos o infecciones, se realiza previamente a la restauración, la endodoncia.</p>
<p>La endodoncia es el tratamiento de conductos radiculares, esto corresponde a toda terapia que es practicada en el complejo dentino-plupar de un diente. La terapia endodóntica consiste en la extirpación parcial (pulpotomías en dientes temporales) o la extirpación total de la pulpa dental (nervio-arteria-vena).</p>
</div>
<div class="panel-row__img">
<img src="images/instrumental.jpg" alt="Instrumental">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Patología periapical</h3>
<p>La periodontitis apical es un proceso inflamatorio del periodonto apical y/o lateral del diente. El objetivo de la endodoncia es prevenir y/o curar la periodontitis apical.</p>
<p>En algunos casos hay que complementar la endodoncia con tratamiento quirúrgico denominado apicectomía.</p>
</div>
<div class="panel-row__img">
<img src="images/periapical.jpg" alt="Patología periapical">
</div>
</div>
</div>
<div id="tab-3" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Periodoncia</h3>
<p>La periodoncia es la especialidad odontológica que estudia la prevención, diagnóstico y tratamiento de las enfermedades y condiciones que afectan los tejidos que dan soporte a los dientes, para el mantenimiento de la salud, función y estética de los dientes y sus tejidos adyacentes.</p>
<p>Las principales enfermedades periodontales que afectan a la dentición son la periodontitis y la gingivitis.</p>
<p>La enfermedad periodontal se manifiesta como un gingivitis (inflamación y sangrado de la encía sin afectar el hueso) o periodontitis, donde ocurre la destrucción de hueso que soporta el diente.</p>
<p>Si no es tratado a tiempo puede ocasionar la pérdida de los dientes.</p>
</div>
<div class="panel-row__img">
<img src="images/periodoncia.jpg" alt="Periodoncia">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Prevención</h3>
<p>La prevención y el diagnóstico precoz son fundamentales en la enfermedad periodontal. Una encía sana nunca sangra, si existe sangrado es un motivo para acudir a tu odontólogo.</p>
<p>Así mismo se convierten en buenos aliados para nuestra higiene dental, como complemento al cepillado de dientes, el uso de cepillos interdentales y la seda dental.</p>
</div>
<div class="panel-row__img">
<img src="images/prevencion.jpg" alt="Prevención">
</div>
</div>
</div>
<div id="tab-4" class="tabs__area">
<div class="panel-row">
<div class="panel-row__text">
<h3>Odontología General</h3>
<p>En Odontología Cazorla cuidamos de tu salud.</p>
<p>La caries constituye la enfermedad crónica más frecuente en el ser humano. Es una enfermedad infecciosa multifactorial que todos padecemos en mayor o menor medida y que afecta a los tejidos duros de los dientes.</p>
<p>En el tratamiento de caries, después de la eliminación y desinfección, restauramos com composite de última generación, que garantizan la funcionalidad y la estética de la obturación.</p>
<p>Entre las cualidades de estos materiales podemos mencionar su elevada resistencia, su nula toxicidad y su aspecto totalmente natural y estético que iguala por completo el color y brillo natural del diente.</p>
</div>
<div class="panel-row__img">
<img src="images/odontologia-general.jpg" alt="Odontología General">
</div>
</div>
<div class="panel-row reverse">
<div class="panel-row__text">
<h3>Prótesis Dental</h3>
<p>El pricipal objetivo de una prótesis dental es recuperar la funcionalidad de la boca, aunque no es lo único. Toda prótesis, sea del tipo que sea, debe tener un sistema de retención eficiente, es decir, que la restauración se mantenga sujeta en la boca, ya que de no ser así la masticación, deglución y fonética, se verán afectadas.</p>
<p>Existen diversos tipos de prótesis dentales y cada una de ellas seran las indicadas según las necesidades del paciente. En término genéricos hablamos de dos tipos de prótesis, fija y removible.</p>
</div>
<div class="panel-row__img">
<img src="images/protesis-dental.jpg" alt="Prótesis Dental">
</div>
</div>
</div>
<div id="tab-5" class="tabs__area">
<div class="panel-row panel-row__single">
<div class="panel-row__text">
<h3>Estética Dental</h3>
<p>En la sociedad moderna se convierte en algo imprescindeible para nuestra apariencia estética tener una buena sonrisa.</p>
<p>La estética y cosmética dental comprende todos los procedimientos encaminados a corregir aquellas imperfecciones que nos impiden sentirnos a gusto con nuestros dientes.</p>
<p>Todos nuestros tratamientos se realizan siempre simulando la belleza natural de los dientes, de manera que procuramos devolver la salud oral sin olvidar el aspecto estético.</p>
<ul class="menu-list__tab">
<li>Blanqueamiento dental.</li>
<li>Carillas de porcelana.</li>
<li>Coronas de zirconio y alúmina.</li>
<li>Reconstrucciones de composite.</li>
</ul>
</div>
<div class="panel-row__img">
<img src="images/estetica-dental.jpg" alt="Estética Dental">
</div>
</div>
</div>
<div id="tab-6" class="tabs__area">
<div class="panel-row panel-row__single">
<div class="panel-row__text">
<h3>Ortodoncia</h3>
<p>Un diagnóstico certero es la clave para un buen resultado.</p>
<p>Te propondremos el tratamiento de ortodoncia adecuado a tu problema y a tus necesidades.</p>
<p>No dejes de cumplir tu sueño de tener una sonrisa bonita. Tú eliges.</p>
<ul class="menu-list__tab">
<li>Ortodoncia convencional con brackets metálicos y cerámicos (estéticos)</li>
<li>Ortodoncia invisible "invisalign"</li>
<li>Ortopedia dentofacial</li>
</ul>
</div>
<div class="panel-row__img">
<img src="images/ortodoncia.jpg" alt="Ortodoncia">
</div>
</div>
</div>
</div>
</div>
当我点击链接时遇到问题，因为它是通过锚点，它将我带到相应的锚点。然后选项卡的导航菜单“隐藏”在页面的导航菜单后面。
图像1显示，图像2显示。
我只需要在加载后滚动页面，但只有当用户点击其中一个特定链接时才会滚动，而不是通用处理链接。也就是说，如果页面的网址显示＃tab-1，＃tab-2等，那么我想要滚动，如果没有，则不需要。
标签代码
var app = {};
app.tabs =（function（）{ var module = {};
module.init = function() {
var $tabs = $('.tabs');
var $tabList = $('.tabs__list');
var $tabItem = $('.tabs__item');
var $tabItemActive = $('.tabs__item--active');
var $tabLink = $('.tabs__link');
var width = $(window).width();
var tabSwitcher = function() {
// On tab link click
$tabLink.on('click', function(e) {
var currentAttrValue = jQuery(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).addClass('tabs__area--active').siblings().removeClass('tabs__area--active')
// Change/remove current tab to active
$(this).parent('li').addClass('tabs__item--active').siblings().removeClass('tabs__item--active');
e.preventDefault();
});
}
var tabToggle = function() {
$tabItem.on('click', function(e) {
$(this).parent($tabList).toggleClass('tabs__list--open');
});
}
var tabController = function() {
tabToggle();
}
$(window).resize(function() {
var width = $(window).width();
if ($(window).width() != width) {
width = $(window).width();
tabController();
}
});
tabController();
tabSwitcher();
};
return module;
加载页面时如何滚动页面？
如果需要，这是网页的网址：link
提前致谢
答案 0 :(得分：0)
您可以使用以下代码段：
$('.tabs__link a[href*=\\#]').on('click', function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
它使用您已在网站中使用的jQuery，因此请务必将其包含在您引用jQuery的下方。
通过检测点击工作，一旦检测到点击，它将滚动到被点击元素的锚标记。
定位并不完美，因此我从中减去150px。你可以玩这个！
答案 1 :(得分：0)
我刚刚为我们的客户创建了类似的东西。它会在加载时检查URL中是否存在哈希值。如果有，它将打开点击链接的工作申请。在下面针对您的用例修改了它，使用Siegfried's answer进行滚动动画。
(function ($) {
// Immediately execute this bit, but only after the page is completely done loading.
$(window).load(function() {
// If an anchor was passed via the URL, scroll to it right away.
// If no anchor is detected, nothing gets executed.
if (window.location.hash) {
scrollToHash(window.location.hash)
}
function scrollToHash(hash) {
// Assuming the hash exists only once on the page.
$('#' + hash).each(function() {
var $anchor = $(this).first();
if ($anchor.attr('href') === hash) {
// Use animation code here by @Siegfried in answer: https://stackoverflow.com/a/46012610/1155833 - Modified to use existing $anchor var
$('html,body').animate({scrollTop:$anchor.offset().top}, 500);
}
});
}
});
// Stuff outside `.load()`
});