单击一页滚动菜单时更改URL哈希值

Changing URL hash value when one page scrolling menu is clicked

本文关键字：URL 哈希值 一页 滚动 菜单 单击      更新时间：2023-09-26

我有一个单页滚动脚本。

<script>
            $(function() {
                $('.nav li a').bind('click',function(event){
                    var $anchor2 = $(this).parent();
                    var $anchor = $(this);
                    $('.nav  li').removeClass('active');
                    $anchor2.addClass('active');

                    $('html, body').stop().animate({
                        scrollTop: $($anchor.attr('href')).offset().top - 50
                    }, 1500,'easeInOutExpo');
                    event.preventDefault();
                });
            });
        </script>

上面的剧本非常完美。但是地址栏中的典型URL如下

example.com/index.html
example.com/index.html#about
example.com/index.html#contact

我想把这个URL改成更整洁、更实用的东西，比如

example.com/about
example.com/contact

如果直接访问上面的URL，它应该在相同的滚动位置。我们如何在jQuery中做到这一点？

使用location.hash和document.title

$('.nav li').on('click', 'a', function(event){
       if ($(this).parent("li").hasClass("active")){
        return false;
       }else{
        var go2hash = $(this).attr("data-hash");
        $(this).parent("li").addClass("active").siblings("li").removeClass("active");
        document.title = go2hash;
        location.hash = go2hash;
        event.preventDefault();
       }
});

锚状：

 <nav>
      <li><a data-hash=home>home</a></li>
      <li><a data-hash=work>work</a></li>
      <li><a data-hash=contact>contact</a></li>
 <nav>

如果您使用Apache，并且只关心来自站点外部的更干净的URL，则可以在根目录中的.htaccess文件中使用ModRewrite规则。

此示例会将example.com/contact的请求重定向到example.com/#contact，并在正确的部分加载页面。

RewriteEngine on
RewriteBase /
RewriteRule ^([a-z]+)/?$ /#$1 [R,NE,L]

一旦进入网站，散列就会回来。我不知道这是否会破坏你的交易。

相关文章：