Roll anchor

Question

Roll anchor

Asked 4 years, 10 months ago

Viewed 102 times

-2

Good morning,

I am trying to make a clickable Dice with scrolling on my blog.

But the code I made does not work when creating the page, it changes the url instead of going to the informed ID. What would be the best way to resolve this?

Follow link of the test page -> https://www.mundoinfantilstore.com.br/premium-meninos

Follows code:

<script>
// início do plugin
// insira aqui os créditos do autor do plugin
$.extend($.easing,
{
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    }
});
// fim do plugin


$("a").click(function(e){
   e.preventDefault();

   var anc = this.hash;

   $("html, body").animate({
      scrollTop: $(anc).offset().top
   }, { duration: 2000, easing: 'easeOutCirc'});
});
</script>

<style>
  a, #ancora{
   display: block;

}

a, #ancora1{
 display: block;
}

a, #ancora2{
 display: block;
}

a, #ancora3{
 display: block;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div style="float: left; display: block;"><img src="https://179028l.ha.azioncdn.net/img/2019/12/loja/17851/principal-01.jpg" /></div>
<a href="#ancora"><img src="https://179028l.ha.azioncdn.net/img/2019/12/loja/17850/principal-02.jpg" /></a>
<a href="#ancora1"><img src="https://179028l.ha.azioncdn.net/img/2019/12/loja/17849/principal-03.jpg" /></a>
<a href="#ancora2"><img src="https://179028l.ha.azioncdn.net/img/2019/12/loja/17848/principal-04.jpg" /></a>
<a href="#ancora3"><img src="https://179028l.ha.azioncdn.net/img/2019/12/loja/17847/principal-05.jpg" /></a>
<div id="ancora">div com a âncora!</div>
<p>Teste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste teste</p>
<div id="ancora1">div com a âncora!</div>
<p>Teste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste teste</p>
<div id="ancora2">div com a âncora!</div>
<p>Teste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste teste</p>
<div id="ancora3">div com a âncora!</div>
<p>Teste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste testeTeste teste teste teste teste</p>

1

Your code is doing /#ancora and should be /premium-meninos#ancora

– hugocsl

2020/01/02 at 12:57

1 answer

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.

by Luiz Antônio Cardoso Costa • 43 points · Answer 1 · 2020-01-02T20:28:40+00:00

Guy uses that example here. it’s very simple

$('a[href^="#"]').on('click', function(e) {
    e.preventDefault();
    var id = $(this).attr('href'),
            targetOffset = $(id).offset().top;

    $('html, body').animate({ 
        scrollTop: targetOffset - 100
    }, 500);
});

I used this reference here if you want more details. https://www.origamid.com/codex/scroll-suave-para-link-interno/