Question

我有一个单页滚动脚本。

<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

我想将此网址更改为更整洁，更实用的内容，例如

example.com/about
example.com/contact

如果直接访问上述URL，则应该处于相同的滚动位置。我们怎么能在jQuery中做到这一点？

Answer 1

使用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>

Answer 2

如果您使用的是Apache，并且只关注站点外部的更清晰的URL，则可以在根目录中的.htaccess文件中使用ModRewrite规则。

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

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

进入网站后，哈希将会回来。我不知道你的情况是否会成为交易破坏者。

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

2 个答案: