Anchor tag to some element in same page id doesn&#

Question

Haai. I have a trouble in my little project. I've create <a href="slogannya">some icon</a> and <blockquote id="slogannya">but when I click the <a> tag it doesn't work. Here is my code :

Html

<section class="to-content">
        <a class="scrollTo" href="#slogannya">
          <button type="button">
            <i class="material-icons">keyboard_arrow_down</i>
          </button>
        </a>
      </section>
      <section class="slogan">
        <blockquote id="slogannya">
          <p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
        </blockquote>
      </section>

Jquery

$(document).ready(function () {
  $(".scrollTo").on('click', function (e) {
      e.preventDefault();
      var target = $(this).attr('href');
      $('html, body').animate({
          scrollTop: ($(target).offset().top)
      }, 2000);
  });

});

How can I made this work? Please help me :)

EDIT

I know what my problems is. In my project, I have a css called 'general.css' (this css content css reset and other styling for any page). In this css, it makes any element to be box-sizing: border-box; and others style. I don't know specifically what the problems. But when I remove my 'general.css', the smooth scroll is work. Thank you for all your answers friends :) , I'm appreciate it!!

Answer 1

All you need is HTML some <a>nchors and any element you want (even more <a>nchors go crazy). BTW the reason targeting id wasn't working for you is because the href requires a prefix of # to the url. ex. <a href="#ID"... Another reason that it may not work is that the <a>nchor and the destination element are too close to each other, so ideally a destination should be at least far enough that scrolling is needed to get there.

• For a destination element, ensure that it has an #id. ex <div id='ID'...

• Next, for each destination, create one or more <a>nchors and set their href values as #+ID. ex. <a href='#ID...

• If the destination element happens to be an <a>nchor, we can use the name attribute as well. ex. <a name='NAME'...

Demo

main {
  margin: 50px auto;
}

a[name] {
  background: black;
  color: white
}

<main id='main'>
  <header>
    <h1>Anchor Test</h1>
    <nav>
      <a href='#s0'>Section 1</a>
      <a href='#s1'>Section 2</a>
      <a href='#s2'>Section 3</a>
    </nav>
    <nav id='toTop'>
      <a href='#end'>End                                                                     

                                                        
            

查看更多

0人赞 添加讨论(0) 举报

•  加载中...

Answer 2

Actually it works but the problem is that the blockquote tag are immediate after the anchor tag but if you make a space between them you'll see the animation in action

in brief : the animation will work only when the scroll bar appear on the window and there is a space between the two elements look at the example below and you'll see it works

$(document).ready(function () {
  $(".scrollTo").on('click', function (e) {
console.log('clicked');
      e.preventDefault();
      var target = $(this).attr('href');
      $('html, body').animate({
          scrollTop: ($(target).offset().top)
      }, 2000);
  });

});

.any{
height:400px ;
width : 100% ; 
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
        <a class="scrollTo" href="#slogannya">
          <button type="button">
            <i class="material-icons">keyboard_arrow_down</i>
         
          </button>
        </a>
      </section>
      <div class='any'></div>
      <section class="slogan">
        <blockquote id="slogannya">
          <p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
        </blockquote>
      </section>

Answer 3

It was working but the code supplied had no height to scroll, also wasn't a smooth scroll. If that isn't the case try this.

$(document).ready(function() {
  $("a").on('click', function(event) {

    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;

      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1500, function() {

        window.location.hash = hash;
      });
    }
  });
});

.to-content {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="to-content">
  <a href="#slogannya">
    <button type="button">
            <i class="material-icons">keyboard_arrow_down</i>
          </button>
  </a>
</section>
<section class="slogan">
  <blockquote id="slogannya">
    <p>Wanna create an event? <br> or you want to give some advice to us? Use the form below </p>
  </blockquote>
</section>