Question

我试图找出当用户点击指向特定div或网站部分的锚标记/链接时，如何在我的网站上添加转换。对不起，我的英语不好。我在我的网站上添加了javascript，但它仍然立即滚动到没有转换的特定div

这是我正在进行的工作。

HTML

<!--NAVIGATION -->
<div class="sidebar">
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#menu">Menu</a></li>
            <li><a href="#gallery">Gallery</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</div>


<!--CONTENT -->
<div class="content">
    <div id="home" class="munla-slides home-slide"></div>
    <div id="menu" class="munla-slides menu-slide"></div>
    <div id="gallery" class="munla-slides gallery-slide"></div>
    <div id="contact" class="munla-slides contact-slide"></div>
</div>

CSS

*{
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box
}

html, body{height:100%; overflow:hidden}

.sidebar{
    width:20%; 
    float:left; 
    height:100%; 
    background-color:beige
}

.content{
    width:80%; 
    float:left; 
    height:100%; 
    background-color:teal; 
    overflow:hidden
}

.munla-slides{height:100%; width:100%; overflow-x:hidden}
.munla-slides .box1{height:500px; width:300px; background-color:grey}

.home-slide{background-color:#774040}
.menu-slide{background-color:#17D8C5}
.gallery-slide{background-color:#F96327}
.contact-slide{background-color:#D34593}

JAVASCRIPT

<script>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $("html, body").animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

当用户单击锚标记/链接时，在网站的scrollto功能中添加转换

0 个答案: