スムーススクロールを各セクションごとに高さを調節したい

各セクションごとにコンテンツの高さが異なるので、固定スクロールで各セクションごとの高さを差し引くために、jQueryを条件分岐で実装したいです。

Javascript
1/*--------------------------------------------------------------
2# smooth scroll
3--------------------------------------------------------------*/
4jQuery(function() {
5  var headerHight = 135;
6  jQuery('a[href^="#"]').click(function() {
7    var speed = 1500;
8    var href = jQuery(this).attr("href");
9    var target = jQuery(href == "#" || href == "" ? 'html' : href);
10    var position = target.offset().top - headerHight;
11    jQuery('body,html').animate({
12      scrollTop: position
13    }, speed, 'swing');
14    return false;
15  });
16});

PHP
1<section id="intro" class="intro">
2				<div class="container">
3					<div class="row">
4						<div class="col-md-12">
5							<div class="section-header">
6								<h1><img class="img-fluid title-intro" src="<?php echo get_template_directory_uri(); ?>/images/title-intro.png"	alt="title-intro"></h1>
7							</div>
8							<p class="lead intro-text">説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト>説明テキスト</p>
9						</div>
10					</div>
11				</div>
12			</section><!-- .intro -->
13
14			<section id="about" class="about">
15				<div class="about-wrapper">
16					<div class="container">
17						<div class="section-header">
18							<h2><img class="img-fluid title-about" src="<?php echo get_template_directory_uri(); ?>/images/title-about.png"	alt="title-about"></h2>
19						</div>
20						<div class="row">
21							<div class="col-md-3 col-sm-6">
22								<div class="about-circle">
23									<div class="about-text">
24										<h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-circle.png"	alt="title-circle"></h3>
25										<p>BAROQUE</p>
26									</div>
27								</div>
28							</div>
29							<div class="col-md-3 col-sm-6">
30								<div class="about-circle">
31									<div class="about-text">
32										<h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-organizer.png"	alt="title-organizer"></h3>
33										<p>うづき</p>
34									</div>
35								</div>
36							</div>
37							<div class="col-md-3 col-sm-6">
38								<div class="about-circle">
39									<div class="about-text">
40										<h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-booth.png"	alt="title-booth"></h3>
41										<p>未定</p>
42									</div>
43								</div>
44							</div>
45							<div class="col-md-3 col-sm-6">
46								<div class="about-circle">
47									<div class="about-text">
48										<h3><img class="img-fluid about-item" src="<?php echo get_template_directory_uri(); ?>/images/title-date.png"	alt="title-date"></h3>
49										<p>2018/3/11</p>
50									</div>
51								</div>
52							</div>
53						</div>
54					</div>
55				</div>
56			</section><!-- .about -->

kei344

2017/12/13 02:25

「高さが異なる」に合わせて何を変更したいのでしょうか。また、ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

行動規範の内容に同意します

回答1件

ベストアンサー

移動先を変更しました。

javaScript
1/*--------------------------------------------------------------
2# smooth scroll
3--------------------------------------------------------------*/
4jQuery(function() {
5  var headerHight = 80;
6  jQuery('a[href^="."]').click(function() {
7    var speed = 1500;
8    var href = jQuery(this).attr("href");
9    var target = jQuery(href == "." || href == "" ? 'html' : href);
10    var position = target.offset().top - headerHight;
11    jQuery('body,html').animate({
12      scrollTop: position
13    }, speed, 'swing');
14    return false;
15  });
16});