它应该在平滑滚动时不起作用？

Question

所以我一直在为我的新市场花园公司设计一个网站。电子商务后端为Lemonstand。我只想让主图像底部的箭头按钮滚动到锚点（而不是跳转）。 You can view the website here.

我在本网站上发现此代码以回答另一个问题：

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');
}

$("#scroll").click(function() {
    scrollToAnchor('start');
});

HTML是：

<div id="home-image-scrollbtn" class="mt-auto"><a id="scroll" href="#start">
<i class="fas fa-arrow-circle-down"></i></a></div>

<section class="container"><a name="start"></a>

我正在从谷歌的CDN加载jquery 3.3.1。

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

我还尝试了很多js脚本。他们都在理论上工作，但似乎并没有在我的网站上工作。我错过了什么？

Answer 1

一个小型演示，可能有所帮助。

＆＃13;

＆＃13;

// Back to top
var amountScrolled = 300;
$(window).scroll(function() {
	if ( $(window).scrollTop() > amountScrolled ) {
		$(".bck-top").addClass("show");
	} else {
		$(".bck-top").removeClass("show");
	}
});
$(".bck-top").click(function() {
	$("html, body").animate({
		scrollTop: 0
	}, 800);
	return false;
});

// Smooth Scroll
$(".nxt-pg").click(function(event){
    $("html, body").animate({
        scrollTop: $( this ).offset().top
    }, 800);
    event.preventDefault();
});

＆＃13;

.for-height {
	background: crimson;
	height: 150vh;	
}
.bck-top {
  position: fixed;
  right: -75px;
  bottom: 35px;
  background: #0e4d67;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 0;
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
  transition: all .6s cubic-bezier(0.56, 0.07, 0.35, 1.99);
  cursor: pointer;
  z-index: 555;
}
.bck-top.show {
  right: 35px;
  border-radius: 0 50% 50% 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: #797bed;
  opacity: 1;
  transition-property: right, transform, border-radius;
  transition-duration: .6s, .6s, .5s;
  transition-timing-function: cubic-bezier(0.56, 0.07, 0.35, 1.99);
  transition-delay: 0s, 0s, .5s;
  box-shadow: 2px 2px 6px 0px #303030;
}
.bck-top.show:hover {
  border-radius: 50%;
  transition: all .4s cubic-bezier(0, 2.84, 0, 1.19);
}
.nxt-pg {
  position: absolute;
  right: 0;
  bottom: 20px;
  left: 0;
  width: 40px;
  height: 29px;
  margin: 0 auto;
	cursor: pointer;
}
.nxt-pg span,.nxt-pg span:before, .nxt-pg span:after {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 35px;
  background: #fff;
  animation: fadeBottom .8s cubic-bezier(0.56, 0.07, 0.35, 1.99) alternate infinite;
}
.nxt-pg:active span,.nxt-pg:active span:before, .nxt-pg:active span:after {
	animation-play-state: paused;	
}
.nxt-pg span {
	position: relative;
	margin: 0 auto;
}
.nxt-pg span:before, .nxt-pg span:after {
	content: '';
	position: absolute;
	right: 0;
	left: 0;
	margin: 0 auto;
}
.nxt-pg span:before {
	top: 12px;
	width: 30px;
	animation-delay: .15s;
}
.nxt-pg span:after {
	top: 24px;
	width: 20px;
	animation-delay: .2s;
}
@-webkit-keyframes fadeBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    opacity: .5;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background: #009688;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}
@keyframes fadeBottom {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  50% {
    opacity: .5;
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
    background: #787bed;
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="for-height">
	<a class="nxt-pg">
        <span class="br-top"></span>
        Click Me
    </a>
</div> 

<button type="button" class="bck-top">up</button>

＆＃13;

＆＃13;

＆＃13;