平滑滚动可用于导航栏，但不能用于其他元素(箭头等)

Question

我有一个Rails应用程序，它使用jQuery平滑滚动功能。平滑滚动适用于导航条链接，但不适用于"向下滚动"箭头或"返回顶部"箭头。我尝试添加一个脚本标记来直接在元素上实现行为，但没有成功。欢迎提出任何建议！

这是滚动功能-

// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') 
&& 
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});

这是包含向下箭头的块。带(此处有一些文本(的parens不在我的实际代码中，我只是将其更改为S/O。-

<div class="typebox" style="min-height: 119px;">
	  <div id="typed-strings">
	  <h3 class="type-active"><strong style="font-size: 20px; line-height: 1.5em;"> (some text here) <br> (some more text here) &nbsp; <br><br><a href="#web-apps"><%= image_tag "down-arrow.png", class: "down-arrow"%></a></strong></h3>
	 </div> 
	 <span id="typed"></span>	
	 <br />
	</div>

Answer 1

我在链接上找不到你的代码，但看到你的网站，我能想到一些事情：

1( 当你设置click回调时，你的向下箭头不在那里，它是稍后添加的，具有键入的效果，所以click回调不会在A标记上设置。我想你使用的库有一些事件可以让你知道效果已经完成，然后你可以为A标签设置回调

2( 从后到上的箭头有href="#"，它显然没有被选中用于带有行.not('[href="#"]')的点击函数，我猜你是从其他地方复制的函数，你可以在从后到前的A标记的href后面添加一个id，并在站点的顶部添加一个具有该id的元素

---

EDIT：要修复向下箭头事件侦听器，我会这样做：

首先，将功能移动到参数之外

function scroll_to_hash(event) {
// On-page links
if (
location.pathname.replace(/^//, '') == this.pathname.replace(/^//, '') 
&& 
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
}
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(scroll_to_hash);

第二，我猜你正在使用Typed.js，你有一个onComplete回调https://mattboldt.com/typed.js/docs/，然后当您初始化插件时，您可以在选项上设置回调的向下箭头的点击事件

onComplete: function(self) {
$('a[href="#web-apps"]').click(scroll_to_hash)
}