有关混合使用HTML5历史记录API，css选择器和jQuery的平滑滚动插件的问题

Question

在我的SPA网页中，我使用了juizy-slideshow ，它在其play / pause / next / prev / dots命令中滥用了css：target伪类。.而我本人则在网页中使用了更多：targets来向上滚动为了达到这个效果，我还使用了jQuery的平滑滚动插件来控制每个：target的滚动以使其平滑，并且我不得不在其上作例外，不要考虑juizy-slideshow的：target，直到这里一切正常。

这是滑块代码html部分：

  <div id="Accueil">
   <div id="s_w_wrap">
      <div id="sliderwrap">
         <div id="slider"  style="position:absolute;right:-15px;top:20px;width:60%;">
            <span id="Pause_defiler_accueil" class="sl_command">&nbsp;</span>
            <span id="Nos_services" class="sl_command sl_i">&nbsp;</span>
            <span id="Nos_references" class="sl_command sl_i">&nbsp;</span>
            <span id="Contactez_nous" class="sl_command sl_i">&nbsp;</span>                                 
            <section id="slideshow">                    
               <a class="commands prev commands1 cmdlink" href="#Contactez_nous" title="Contact">&lt;</a>
               <a class="commands next commands1 cmdlink" href="#Nos_references" title="Nos Réfs">&gt;</a>
               <a class="commands prev commands2 cmdlink" href="#Nos_services" title="Nos Services">&lt;</a>
               <a class="commands next commands2 cmdlink" href="#Contactez_nous" title="Contact">&gt;</a>
               <a class="commands prev commands3 cmdlink" href="#Nos_references" title="Nos Réfs">&lt;</a>
               <a class="commands next commands3 cmdlink" href="#Nos_services" title="Nos Services">&gt;</a>                        
               <a id="cmdpause" class="play_commands pause cmdlink" href="#Pause_defiler_accueil" title="Stopper l'animation">Pause</a>
               <a id="cmdplay" class="play_commands play cmdlink" href="#Defiler_accueil" title="Lancer l'animation">Play</a>                           
            </section>
            <div class="container">
               <div class="c_slider"></div>
               <div class="slider">
                  <figure id="servsfig">
                     <img src="images/sliderimgs/prods.jpg" alt="" width="440" height="310" />
                     <figcaption>~~ Nos services ~~</figcaption>
                  </figure>
                  <!--
                     -->
                  <figure id="refsfig">
                     <img src="images/sliderimgs/nos_references.jpg" alt="" width="440" height="310" />
                     <figcaption>~~ Nos références ~~</figcaption>
                  </figure>
                  <!--
                     -->
                  <figure id="contfig">
                     <img src="images/sliderimgs/phoneus.png" alt="" width="440" height="310" />
                     <figcaption>~~ Contactez-nous! ~~</figcaption>
                  </figure>
               </div>
            </div>
            <span id="timeline"></span>                     
            <ul class="dots_commands">
               <!--
                  -->
               <li><a class="cmdlink" title="Nos services" href="#Nos_services">Nos services</a></li>
               <!--
                  -->
               <li><a class="cmdlink" title="Nos références" href="#Nos_references">Nos références</a></li>
               <!--
                  -->
               <li><a class="cmdlink" title="Contactez-nous!" href="#Contactez_nous">Contactez-nous!</a></li>
            </ul>
            </section>  
         </div>
      </div>
   </div>
</div>

这是其CSS部分的一部分：

.sl_i:target ~ #slideshow .slider                               { visibility: hidden }
.sl_i:target ~ #slideshow .txtslider                                { visibility: hidden }
.sl_i:target ~ #slideshow .txtslider2                           { display: block } 


.sl_i:target ~ #slideshow .slider figcaption                        { visibility: hidden }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:after     { display:none; }
.sl_i:target ~ #slideshow .dots_commands li:first-child a:before    { display:block; }}

#Nos_services:target ~ #slideshow .commands                             { display: none; }
#Nos_services:target ~ #slideshow .commands1                                { display: block; }
#Nos_services:target ~ #slideshow .c_slider                             { background-position: 0 0, 440px 0, 880px 0, 1320px 0; }
#Nos_services:target ~ #slideshow .txtslider2                           { left: 0}
#Nos_services:target ~ #slideshow .txtslider                            { left: 0}

#Nos_services:target ~ #slideshow .dots_commands li:first-child a:before    { left:0; }

#Nos_references:target ~ #slideshow .commands                               { display: none; }
#Nos_references:target ~ #slideshow .commands2                          { display: block; }
#Nos_references:target ~ #slideshow .c_slider                               { background-position: -440px 0, 0 0, 440px 0, 880px 0; }
#Nos_references:target ~ #slideshow .txtslider2                         { left: -100%}
#Nos_services:target ~ #slideshow .txtslider                            { left: -100%}

#Nos_references:target ~ #slideshow .dots_commands li:first-child a:before  { left:18px; }

#Contactez_nous:target ~ #slideshow .commands                               { display: none; }
#Contactez_nous:target ~ #slideshow .commands3                          { display: block; }
#Contactez_nous:target ~ #slideshow .c_slider                               { background-position: -880px 0, -440px 0, 0 0, 440px 0; }
#Contactez_nous:target ~ #slideshow .txtslider2                         { left: -200%}
#Nos_services:target ~ #slideshow .txtslider                            { left: -200%}
#Contactez_nous:target ~ #slideshow .dots_commands li:first-child a:before  { left:36px; }

这是jQuery的平滑滚动代码：

$('a[href*=#]:not([href=#], [href=#Defiler_accueil], [href=#Pause_defiler_accueil], [href=#Defiler_services], [href=#Pause_defiler_services], [href=#Defiler_references], [href=#Pause_defiler_references], [href^=#sl_i], [href=#Nos_services], [href=#Nos_references], [href=#Contactez_nous], [href=#Parquet_stratifie], [href=#Rideaux_lamelles], [href=#Moquette], [href=#Plancher_technique], [href=#Cloison_en_plaque_de_platre], [href=#Plafond_demontable], [href=#Usine_menuiserie_aluminium], [href=#Pharmacie_Ben_Youssef], [href=#PIZZA_HUT_Tunis_Mal_Lac], [href=#Tunis_Mall_Lac])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

        var target = $(this.hash);
        history.pushState('', '', '/' + this.hash.slice(1));
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    }
});

现在我对html5 pushstate（HTML5 History API）了如指掌，我喜欢它可以使我页面的链接具有REST样式而不是丑陋的＃号，然后问题开始出现：

1）[说是否正确]对于使用pushstate时的滚动目标，这完全没有问题，因为它们将所有目标均指向第一级路径（例如， http：// localhost / my-app-foldername-in- www / home / ），但pushstate删除了应用程序域名（my-app-foldername-in-www），并且我得到了类似urls的网址：localhost / home，localhost / Products。 我在这里假设稍后将应用托管在服务器中时，“ localhost”将替换为my-app-foldername-in-www，它将本身变为域名，而网址将为“ my-app-foldername-in” -www / products”，这样就不会再有问题了。

2）在几乎每个部分（/ home，/ Products ..）中，我都使用juizy-slideshow，因此在这里我想要的URL具有2级路径（例如/ Products / stuff（第二级对应于确实由CSS控制的幻灯片）选择器来触发滑动过渡，例如： #stuff:target ~ #slideshow .c_slider{ background-position: -440px 0, 0 0, 440px 0, 880px 0; } 。首先，我只是简单地替换了类的名称和标识符（最初用作href的：targets）的绝对路径，例如#Products/stuff:target ~ #slideshow .c_slider{ background-position: -440px 0, 0 0, 440px 0, 880px 0; }但是CSS（不会接受）当将它们添加到平滑滚动插件异常中时）和过渡停止工作，因此我决定保留CSS的这些类和ID名称，并在使用pushstate时在URL中使用绝对路径：

                $(".cmdlink").on("click", function(event){
                    //event.preventDefault();

                    var accu_arr = ["stuff1", "stuff2", "stuff3"];
                    var newurl = this.hash.slice(1);

                    if($.inArray( newurl, accu_arr) != '-1')
                        newurl = "Products/"+newurl;

                    console.log('cmdlink : newurl 1: '+newurl);
                    history.pushState('', '', newurl+'/');  
                });

但是它仍然不能使CSS转换正常工作，就好像CSS选择器也依赖于URL。 我该怎么办？

3）单击多个这两个双层路径命令中的一个时，我还面临另一个问题，这是每次它使积累由pushstate推送的路径时，我得到的URL类似于http：// localhost / Products / stuff1 / Products / stuff2 / Products / stuff3 / Products / stuff1 。 一级路径不会产生问题，而是改为更新整个url：因此，从localhost / Products传递到localhost / otherSection可以正常工作。 如何处理？

Answer 1

window.hashchange解决了我的问题：

        $(window).on("hashchange", function() {
                var hash = location.hash;
                //covert hash to /hash and make a newurl here..                     
                history.pushState('', '', newurl);               

        });