📌  相关文章
📜  如何使用 jQuery 中的锚元素向上或向下滚动页面?

📅  最后修改于: 2021-08-31 07:20:20             🧑  作者: Mango

问题是每当我们单击本地锚点并且我们想要相应地向上或向下滚动页面时都包含幻灯片效果。早些时候,我们可以通过使用 CSS 属性在本机上做到这一点。

句法:

a {
  scroll-behavior: smooth;
}

现在借助 jQuery,我们可以使用以下两种方法来完成:

  • jQuery.offset() 方法:该方法允许我们检索任何元素相对于文档的当前位置。当我们想要执行拖放操作或想要将新元素放置在另一个现有元素的顶部时,此方法特别有用。
  • jQuery.animate() 方法:此方法允许在任何数字 CSS 属性上创建动画。使用该方法需要 CSS 对象。我们可以使用它来为样式和非样式属性设置动画。

例子:



  

    
        How to scroll the page up or down
        using anchor element in jQuery ?
    
  
    
  
    
  
    

  

    
    
    
  
    
        
    
           
        
    
           
        
    
           
        
    
  

输出:

  • 在第 1 节滚动效果之前:
    滚动效果前
  • 在第 1 部分滚动效果后,我们转到 Cyan Colored Box,如代码所示:
    滚动效果后