javascript - 在一页上使用 anchor 和jQuery加载正确的URL

我在网站上加载页面时遇到问题。主页只有一个页面，因此具有锚点，但是我想添加一个博客，因此将其设置为一个两页的网站。该URL看起来像mywebsite.com＃content，但是现在当我在博客上并试图返回主页时，却加载了这样的URL：mywebsite.com/blog#content。

所以我希望该URL看起来像这样：mywebsite.com/#content，但是我不知道这是否可能...

这是链接的html：

<a href="#homepage" class="js-scrollTo"><li>Accueil</li></a>
        <a href="#projects" class="js-scrollTo"><li>Projets</li></a>
        <a href="#about" class="js-scrollTo"><li>A propos</li></a>
        <a href="#contact" class="js-scrollTo"><li>Contact</li></a>
        <a href="/blog"><li>Blog</li></a>

为了使主滚动效果流畅，我使用了以下jquery：

var scroll = {
    scrollTo : function () {
        var page = $(this).attr('href'); // Target page
        var speed = 750; // Animation duration
        $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
        return false;
    } // attribute scrollTo
}; // object scroll

$('.js-scrollTo').on('click', scroll.scrollTo);

有没有一种方法可以通过以下方式创建url：mywebsite.com/#content并仍然具有jquery的滚动效果？

最佳答案

简单使用e.preventDefault而不是返回false。另外，添加一个控件来检查您的“锚页面”是否在dom中。

外部页面示例：https://www.vixed.it/st/43002103

无论如何，我认为最好更改函数的名称，这可能会对jQuery scroll和scrollTo产生误解。

不要忘记li标签应该包含a和，而不是相反。

var scroll = {
    scrollTo : function (e) {
      var page = $(this).attr('href');
      if ($('div.page'+page).length) {
        e.preventDefault();
        var page = $(this).attr('href');
        var speed = 750;
        $('html, body').animate({scrollTop: $(page).offset().top}, speed);
      } else {
        location.href='/'+page; //your home url + #page
      }
    }
};

$('.js-scrollTo').on('click', scroll.scrollTo);

a{color:#09C}
.nav{
  list-style:none;
  position:fixed;
  top:0;
  right:0;
  width:100%;
  background:#000;
  margin:0;
  padding:5px 0;
}
.nav li{
  display:inline;
  margin:0 5px;
}
.page{
  min-height:200px;
  padding:35px;
  border:1px solid #CCC;
}

<ul class="nav">
  <li><a href="#homepage" class="js-scrollTo">Accueil</a></li>
  <li><a href="#projects" class="js-scrollTo">Projets</a></li>
  <li><a href="#about" class="js-scrollTo">A propos</a></li>
  <li><a href="#contact" class="js-scrollTo">Contact</a></li>
  <li><a href="/blog">Blog</a></li>
</ul>
<div id="homepage" class="page">Accueil</div>
<div id="projects" class="page">Projets</div>
<div id="about" class="page">A propos</div>
<div id="contact" class="page">Contact</div>
<div style="height:1000px;">Footer</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>