Question

我有一个固定的标题，我想让它平滑地滚动到页面的一部分。我可以使用它（之前我已经使用过几次），但是现在发生的事情是当我单击时，它会跳到包含偏移量的正确高度，然后立即跳到没有偏移量的高度。我在Google搜索时尝试了很多其他代码，但是我无法使用其中的任何代码。

也许（https://css-tricks.com/snippets/jquery/smooth-scrolling/）对于可能愿意帮助我的任何人都是有用的；一位名为“杰克·海尔（Jack Hair）”的用户提出了一种解决方案，但是这个解决方案甚至对我来说都不流畅（几乎所有显示在此页面上的代码都是这种情况）

您可以在这里看到我的问题：http://www.avloenhout.nl/bysuus

希望您能帮帮我，我真的不知道如何立即解决。谢谢！

这是我的代码：

HTML

<?php /* Template Name: Homepage */ ?>

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="<?php bloginfo('template_directory'); ?>/js/script.js"></script>
</head>
<body>
<div id="navbar">
  <img src="<?php bloginfo('template_directory'); ?>/images/logo-top.svg" />
  <nav>
    <ul>
      <li><a href="#header">home</a></li>
      <li><a href="#oversuus">over suus</a></li>
      <li><a href="#portfolio">portfolio</a></li>
      <li><a href="#contact">contact</a></li>
    </ul>
  </nav>
</div>

<div id="header">
  <div id="logo"><img src="<?php bloginfo('template_directory'); ?>/images/logo.svg" /></div>
</div>

<div id="oversuus">
  <div class="head-title col-12">
      <h1>Over Suus</h1>
  </div>
  <div class="col-12">
    <div class="col-7">
        <div class="oversuus-text col-7 column horizontal-center">
          <?php
          $page_id = 32; //id example
          $page_data = get_page( $page_id );
          $content = apply_filters('the_content', $page_data->post_content);
          $title = $page_data->post_title;
          echo $content;
          ?>
        </div>
        <div class="oversuus-img col-5 centered">
          <div class="oversuus-foto"></div>
        </div>
    </div>
  </div>
</div>

<div id="portfolio">
  <div class="head-title col-12">
      <h1>Portfolio</h1>
  </div>
  <div class="col-12">
    <div class="col-8">
      <?php
              $query = new WP_Query( array(
             'post_type' => 'post',
             'orderby' => 'date',
             'order' => 'ASC',
             'posts_per_page' => 4
          ) );

          if( $query->have_posts() ) {
              while( $query->have_posts() ) {
                  $query->the_post();
          ?>
              <div class="col-3 column">
                <?php if(has_post_thumbnail()) {
                    $image_src = wp_get_attachment_image_src( get_post_thumbnail_id(),'full' );
                     echo '<a href="'.get_permalink( $id ).'#post"><img src="' . $image_src[0]  . '" width="200px" height="200px"  /></a>';
                } ?>
              <h2><?php the_title(); ?></h2>
              <p><?php echo get_post_meta($post->ID, 'ecpt_beschrijving', true); ?></p>
            </div>
              <?php

              }
          }
      ?>
    </div>
  </div>
</div>

<div id="contact">
  <div class="head-title col-12">
      <h1>Contact</h1>
  </div>
  <div class="col-12">
    <div class="col-6">
    <form action="/action_page.php">
      <input type="text" id="naam" name="naam" placeholder="Naam">
      <input type="text" id="email" name="email" placeholder="E-mailadres">
      <input type="text" id="tel" name="tel" placeholder="Telefoonnummer">
      <textarea id="bericht" name="bericht" placeholder="Bericht" style="height:200px"></textarea>
      <input type="submit" value="Verzenden">
    </form>
    </div>
  </div>
</div>

<div id="questions" class="centered column">
    <p>
      Voor eventuele vragen en/of het maken van een afspraak<br>
      kunt u bellen of mailen.
    </p>
    <a href="mailto:info@by-suus.nl"<div class="mailbt"> MAIL </div></a>
</div>

<div id="footer" class="centered">
  <a><img src="<?php bloginfo('template_directory'); ?>/images/loc.svg"></a><p>Loofhout 17, 4871 WP Etten-Leur</p>
  <a href="mailto:info@by-suus.nl"><img src="<?php bloginfo('template_directory'); ?>/images/mail.svg"></a><p>info@by-suus.nl</p>
  <a href="tel:31620113960"><img src="<?php bloginfo('template_directory'); ?>/images/call.svg"></a><p>+31 (0)6 20113960</p>
  <a href="https://www.facebook.com/bysuusreclamewerk/"><img src="<?php bloginfo('template_directory'); ?>/images/fac.svg"></a><p>Facebook</p>
</div>
</body>
</html>

JS

$(window).scroll(function(){
  var sticky = $('#navbar'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

$(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 - 100
    }, 800, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  } // End if
});
});

CSS

.fixed {
  position: fixed;
  top: 0;
  left: 0;
}

固定页眉+平滑滚动：滚动到偏移量，然后向后跳

0 个答案: