如何在HAML中实现root_path加锚点的完整URL跳转？

嘿，我懂你的需求——默认的锚点链接只会在当前页面内滚动，不会让浏览器去请求完整的URL（带锚点的那种）。这里给你两种靠谱的解决办法，都是基于你的HAML代码修改的：

方法1：直接给链接设置完整URL #

如果你是在Rails项目里用HAML（毕竟这俩经常搭伙），可以直接用request.original_url来拼接当前页面的完整地址+锚点，这样点击时浏览器就会请求完整的URL了：

%li.tab.col.s3.l2
  %a{:href => "#{request.original_url}#main_kpis"} KPIs
#main_kpis.col.s12.no-padding
  .col.s12.light-sky-grid
    #kpis_wrapper

request.original_url会拿到当前页面的完整URL（比如https://your-site.com/dashboard），加上#main_kpis后，最终的链接就是https://your-site.com/dashboard#main_kpis，点击就会触发完整的页面请求。

如果不是Rails环境，你可以手动写死完整域名路径，或者用JS动态获取当前URL：

%li.tab.col.s3.l2
  %a{:href => "", :onclick => "window.location.href = window.location.origin + window.location.pathname + '#main_kpis'; return false;"} KPIs
#main_kpis.col.s12.no-padding
  .col.s12.light-sky-grid
    #kpis_wrapper

方法2：用JS强制触发完整页面加载 #

要是不想改href的写法，也可以给链接加个点击事件，阻止默认的锚点跳转，然后强制浏览器加载带锚点的完整URL：

%li.tab.col.s3.l2
  %a{:href => "#main_kpis", :onclick => "
    // 先去掉当前URL里已有的锚点，避免重复拼接
    const cleanUrl = window.location.href.split('#')[0];
    window.location.href = cleanUrl + '#main_kpis';
    return false;
  "} KPIs
#main_kpis.col.s12.no-padding
  .col.s12.light-sky-grid
    #kpis_wrapper

这里return false是为了阻止浏览器默认的锚点滚动行为，让它执行我们写的JS逻辑去加载完整URL。

小提醒 #

• 用Rails的request写法时，要确保视图能拿到request对象（一般控制器渲染的视图都没问题，要是局部视图可能需要传一下）。
• 要是页面原本就有锚点，JS里的split('#')[0]会帮你清理掉原有锚点，避免出现xxx#old#main_kpis这种奇怪的URL。

内容的提问来源于stack exchange，提问作者Leo