0
モバイルデバイスの場合、すべてのh1見出しをターゲットにスムーズにスクロールできるアンカーに変換します。これを実現するには、特定のデバイスのサイズ変更が発生したときに、aタグを使用してh1タグのコンテンツをラップし、デバイスがデスクトップ幅に戻ったときにaタグのコンテンツのラップを解除するだけです。要素が動的にアンカーでラップされているときのスムーズなスクロールや作業
$(document).ready(function() {
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
//the function to convert the heading to an anchor for devices smaller than 780px
function makeResponsive() {
if ($(window).width() < 780) {
if ($('a').length) {
return true;
} else {
$('h1').each(function() {
$(this).contents().eq(0).wrap('<a href="#section2"></a>');
});
}
} else {
$('a').contents().unwrap();
}
}
//run on document load and on window resize
$(document).ready(function() {
//on load
makeResponsive()
//on resize
$(window).resize(function() {
makeResponsive();
});
});body,
html,
.main {
height: 100%;
}
section {
min-height: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
The Heading
</h1>
<div class="main">
<section></section>
</div>
<div class="main" id="section2">
<section style="background-color:blue"></section>
</div>問題はH1のコンテンツがアンカーに変換されるとき、スムーズなスクロールが全く起きていないとアンカーがちょうどターゲットにジャンプするということです。