Problem in smoothing the scroll on anchor links

Question

Problem in smoothing the scroll on anchor links

Navigation

#1 by (1 votes)

0

Jquery, but I used this script that I found to give the scroll smoothing effect to the "anchored" link:

$(document).ready(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 : false;
            if ($target) {
                var targetOffset = $target.offset().top;
                $(this).click(function () {
                    if($(window).width() > 760){
                        $('html, body').animate({scrollTop: targetOffset}, 250);
                        return false;
                    }
                });
            }
        }
    });
});

HTML

    <nav id="menu">
       <ul>
        <div class="marcadagua"> <a href="#"> <img src="logo_menu.png"> </a></div>
        <li><a href="#qs">Quem somos</a></li>
        <li><a href="#parceiros">Parceiros</a></li>
       </ul>
      </nav>
--
<div class="divancora"> <a name="qs"></a> </div>
<div class="divancora"> <a name="parceiros"></a> </div>

It occurs that somehow it does not lead to the exact point intended. It always gives a height difference to the point it should go. It is not a fixed difference.

I wanted to know the reason.

javascript jquery html5 rolamento menu

asked by anonymous 26.06.2015 / 16:23

1 answer

PHP Calculator Table How can I make these images slide up and down with jQuery?

score 1 · Accepted Answer

Try this script.

Its use is simpler and you can see how it works here .

$(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;
      }
    }
  });
});