Question

说我在页面中有一个链接，

<a href="https://example.com/#sample"><p>Click Me</a>

单击该单击可转到href属性中的链接。但是由于神的运作方式，它会立即捕捉到该页面中的id。

我想要发生的是页面不应该立即转到id，而是从页面顶部开始，然后平滑滚动到id。

在旁注中，粘性菜单会挡住，当它与id对齐时，它会与菜单重叠（我想让它滚动的主要原因之一）。

jQuery不是我的强项。

感谢任何能提供帮助的人。

修改我觉得我说的不合适。与a标记的链接位于与其目标不同的页面上。例如：

主页有链接

<a href="https://example.com/anotherPage/#sample"><p>Click Me</a>

有一个名为anotherPage的页面，我想滚动来处理。

很抱歉没有让这个不够详细。

感谢任何回复的人。

Answer 1

使用jQuery很简单，只有几行。

使用$('a[href*=\\#]')时，它只会/自动应用于所有带有哈希值（<a>）的锚点（#）。

$(document).ready(function() {
    $('a[href*=\\#]').on('click', function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop : $(this.hash).offset().top
        }, 500);
    });
});

更新

如果您想平滑滚动到 new 页面上的元素，请在该页面上包含以下代码：

$(document).ready(function() {
    if (window.location.hash) {
        var hash = window.location.hash;
        $('html, body').animate({
            scrollTop :  $(hash).offset().top
        }, 500);
    };
});

它会检查网址中是否有哈希值，如果是，则会平滑滚动到具有相应id的元素。

注1 ：您可以通过更改500参数来改变速度。这是以ms为单位的动画时间。

注意2 ：您还可以在500之后添加另一个参数，这是缓动类型。默认情况下它是swing（类似于CSS＆{39} ease-in-out），但您可以将其更改为linear。

Answer 2

您可以使用jQuery的动画功能。

请参阅w3学校的此示例：https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll

$(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;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

Answer 3

我总是将这个用于外部链接：这将滚动到具有id＃

的锚点

select (stuff((
   SELECT ', '+ Name  AS 'data()' 
   FROM Table_1 
   FOR XML PATH('')),
   Count('ID')
, 1, ' '))as Result

如何在单击其他页面的链接后平滑滚动到ID

3 个答案:

更新