Question

联系 location.hash有效但约只会重置为您刷新页面的原始位置。有什么想法吗？

这不是整个HTML，只是页面滚动的位置，以便想象上面的更多内容

if (location.hash == "#about") {
	$('html, body').animate({
        scrollTop: $(".landing-section").offset().top -50
    }, 500);
}

if (location.hash == "#contact") {
	$('html, body').animate({
        scrollTop: $(".list-section").offset().top - 50
    }, 800);
}

<div class="nav-item about-item"><a class="ripple" href="/#about">About</a></div>
<div class="nav-item contact-item"><a class="ripple" href="/#contact">Contact</a></div>

	<div class="landing-section">
		<div style="padding-bottom: 30px" class="section-left">
			<div class="section-text">
				<h1 class="section-title">About</h1>
			</div>
		</div>
		<div class="list-section">
			<ul class="landing-list">
			    <li class="landing-list-item">
			    	<p class="landing-list-text">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
			    </li>
			    <li class="landing-list-item">
			    	<p class="landing-list-text">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
			    </li>
			    <li class="landing-list-item">
			    	<p class="landing-list-text">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
			    </li>
			</ul>
		</div>
	</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

脚本在哪里宣布？您是否在页面完全加载后执行此代码？

理想情况下，一旦DOM完全加载，您就会想要做这种事情。通过这样做：

$.ready(function() {
    //Your code here
})

或者在<body>标记的末尾，确保元素（例如＆＃34; .contact＆＃34;，＆＃34; .landing-section＆＃34;）之前存在于DOM中脚本试图滚动到它们。

Answer 2

您正在尝试滚动到类名为.contact的元素，但您的元素都没有这样的类。

我添加了一个.contact类的元素。我还将锚定点击绑定到您在单击锚点（滚动）时要发生的操作。

下面是更新后的代码，其中包含一些增强的JavaScript功能，现在可以在文档就绪时运行。

＆＃13;

$(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;

      if (hash == "#about") {
        $('html, body').animate({
          scrollTop: $(".landing-section").offset().top - 50
        }, 500);
      }

      if (hash == "#contact") {
        $('html, body').animate({
          scrollTop: $(".contact").offset().top - 50
        }, 800);
      }
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-item about-item"><a class="ripple" href="#about">About</a></div>
<div class="nav-item contact-item"><a class="ripple" href="#contact">Contact</a></div>

<div class="landing-section">
  <div style="padding-bottom: 30px" class="section-left">
    <div class="section-text">
      <h1 class="section-title">About</h1>
    </div>
  </div>
  <div class="list-section">
    <ul class="landing-list">
      <li class="landing-list-item">
        <p class="landing-list-text">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </li>
      <li class="landing-list-item">
        <p class="landing-list-text">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </li>
      <li class="landing-list-item">
        <p class="landing-list-text">
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        </p>
      </li>
    </ul>
  </div>
</div>
<h1 class="contact">Contact</h1>

＆＃13;

Answer 3

页面重置到顶部的原因是因为它向下滚动，一旦页面完全加载，它将返回到顶部。为了解决这个问题，我只是向Jquery添加了一个元素，等待页面代码加载完毕。

$(window).bind("load", function() {
	if (location.hash == "**location hash**") {
	$('html, body').animate({
       scrollTop: $(".**div class**").offset().top - 75
    }, 800);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

然后等待所有内容都加载，然后继续向下滚动。

滚动后，Jquery scrollTop重置为原始位置

3 个答案: