javascript 平滑滚动到锚点

Posted 2021-05-03

// Smooth Scroll to Anchor within page
// Arrow created with CSS only, no image file used.

.arrow.scroll {
	text-align: center;

	a {
		position: absolute;
		bottom: 0;
		margin-left: -15px;
		margin-bottom: 30px;

		display: inline-block;
		width: 24px;
		height: 24px;
		border-top: 2px solid $beige;
		border-left: 2px solid $beige;
		-webkit-transform: rotate(225deg);
		transform: rotate(225deg);
	}
}

<!--Smooth Scroll to Anchor within page-->

<p class="arrow scroll">
	<a href="#inner-content" title="Services"></a>
</p>

// Smooth Scroll to Anchor within page

$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 700);
      return false;
    }
  }
});