滚动而不是锚定

18 浏览
0 Comments

滚动而不是锚定

我的页面上有几个超链接。当用户访问我的帮助部分时，他们将阅读一个常见问题解答。\n使用锚点链接，我可以使页面滚动到锚点处，引导用户到达目的地。\n有没有办法使这种滚动更加平滑？\n但请注意他正在使用自定义的JavaScript库。也许jQuery内置了类似的功能？

0

3 答案

0 Comments

滚动而不是定位的出现原因是为了实现平滑滚动效果。解决方法是使用jQuery的animate()函数来实现平滑滚动，并在点击链接时阻止默认的定位行为。

具体代码如下：

// 平滑滚动到目标位置
function smoothScrollingTo(target){
  $('html,body').animate({scrollTop:$(target).offset().​top}, 500);
}
// 点击链接时触发平滑滚动
$('a[href^=\\#]').on('click', function(event){     
    event.preventDefault();
    smoothScrollingTo(this.hash);
});
// 文档加载完成后触发平滑滚动
$(document).ready(function(){
  smoothScrollingTo(location.hash);
});

其中，`$('a[href^=\\#]')`用于选取所有以`#`开头的链接，`event.preventDefault()`用于阻止默认的定位行为。

`href^=\\#`中的`^`表示匹配包含`#`字符的内容，确保只匹配在同一页内的锚链接。

需要注意的是，使用`href*=\\#`替代`href^=\\#`时，可能还需要检查路径名以确保是指向同一页的链接。因为我们曾经遇到过一个问题，即一个哈希链接实际上链接到了另一个页面。

0
0 Comments

滚动而不是锚定的问题出现的原因是为了实现在网页内部平滑滚动到链接指向的位置。解决方法是在CSS中添加scroll-behavior:smooth代码，使链接指向的div部分可以平滑滑动到相应位置。然而，这种方法在某些标签中可能会出现错误，不适用于Safari和Internet Explorer浏览器。如果在Chrome浏览器中出现问题，可以在CSS代码中添加!important标志来修复。

0
0 Comments

滚动而不是定位问题的出现原因是因为在点击锚点时，页面没有平滑地滚动到目标位置，而是直接跳转到目标位置。解决方法是使用JavaScript来监听锚点的点击事件，并使用滚动动画将页面平滑滚动到目标位置。

方法一是使用原生的JavaScript实现。首先，使用querySelectorAll方法选择所有以"#"开头的锚点元素，并为每个锚点元素添加点击事件的监听器。在点击事件的回调函数中，使用scrollIntoView方法将页面滚动到与锚点对应的目标元素位置。这种方法目前只在最新版本的浏览器中支持。

方法二是使用jQuery库实现。首先，使用on方法监听文档上的点击事件，并筛选出以"#"开头的锚点元素。在点击事件的回调函数中，使用animate方法将页面平滑滚动到与锚点对应的目标元素位置。这种方法适用于旧版本的浏览器。

方法三是在目标元素没有ID而是通过name属性链接到它时使用的。首先，使用jQuery的click方法监听所有以"#"开头的锚点元素的点击事件。在点击事件的回调函数中，使用animate方法将页面平滑滚动到与锚点对应的目标元素位置。这种方法适用于旧版本的浏览器。

为了提高性能，可以将选择器$('html, body')缓存起来，以避免在每次点击锚点时都运行一次选择器。

如果希望在滚动动画完成后更新URL，可以在animate的回调函数中执行window.location.hash = href操作。

最后，建议将代码放在window.addEventListener('load', function (){ })中，以确保在标签加载完成后再执行代码。

0