简体   繁体   English

平滑滚动脚本问题

[英]Smooth scroll script issue

I'm using a smooth scroll script for a site I'm currently working on, and I've got a really annoying problem what I've experienced before with the same script. 我正在为当前正在使用的网站使用平滑的滚动脚本,但是我遇到了一个非常烦人的问题,即以前使用同一脚本遇到的问题。 It works nice and smoothly but when I click on one of the navigation points what should lead me to the div(or a) I'm trying to target, it shows me the targeting area for like 0.1 seconds, and then it starts to scroll. 它运作良好且流畅,但是当我单击其中一个导航点时,应该引导我到我要定位的div(或a),它向我显示了约0.1秒的定位区域,然后开始滚动。 It doesn't happen everytime, but often enough to be annoying. 它并非每次都发生,但通常足以令人烦恼。 How could I prevent this? 我该如何预防? Here is the script I'm talking about: 这是我正在谈论的脚本:

$(window).load(function(){
                $(".contactLink").click(function(){
                    if ($("#contactForm").is(":hidden")){
                        $("#contactForm").slideDown("slow");
                    }
                    else{
                        $("#contactForm").slideUp("slow");
                    }
                });
            });
            function closeForm(){
                $("#messageSent").show("slow");
                setTimeout('$("#messageSent").hide();$("#contactForm").slideUp("slow")', 2000);
           }

$(window).load(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }
  $('a[href*=#]').each(function() {
    if ( filterPath(location.pathname) == filterPath(this.pathname)
    && location.hostname == this.hostname
    && this.hash.replace(/#/,'') ) {
      var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : true;
       if ($target) {
         var targetOffset = $target.offset().top - 110;
         $(this).click(function() {
           $('html, body').animate({scrollTop: targetOffset}, 1400);
           var d = document.createElement("div");
        d.style.height = "101%";
        d.style.overflow = "hidden";
        document.body.appendChild(d);
        window.scrollTo(0,scrollToM);
        setTimeout(function() {
        d.parentNode.removeChild(d);
            }, 10);
           return false;
         });
      }
    }
  });
});
setTimeout(function() {
    d.parentNode.removeChild(d);
        }, 10);
       return false;
     });

move the return false out of the setTimeOut return false移出setTimeOut

Found the solution: 找到了解决方案:

 $(this).click(function(e) {
               e.preventDefault();

Now it rolls fine. 现在一切正常。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM