Привязка тега к некоторому элементу с идентичным идентификатором страницы не работает

Haai. У меня проблема с моим маленьким проектом. Я создал <a href="slogannya">some icon</a> а также <blockquote id="slogannya">но когда я нажимаю <a> пометить это не работает. Вот мой код:

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

});

Как я могу сделать эту работу? Пожалуйста, помогите мне:)

РЕДАКТИРОВАТЬ

Я знаю, в чем мои проблемы. В моем проекте у меня есть CSS под названием 'general.css' (это сброс CSS содержимого CSS и другие стили для любой страницы). В этом CSS он делает любой элемент box-sizing: border-box; и другие стиль. Я не знаю конкретно, в чем проблемы. Но когда я удаляю свой файл general.css, плавная прокрутка - это работа. Спасибо за ваши ответы друзья:), я ценю это!!

Источник

3 ответа

Решение

Все, что вам нужно, это HTML некоторые <a> nchors и любой элемент, который вы хотите (даже больше <a> нчоры сходят с ума). Кстати, идентификатор таргетинга не работает для вас, потому что href требует префикса # на URL. ех. <a href="#ID"... Другая причина того, что это может не сработать, заключается в том, что <a> Элемент nchor и пункт назначения расположены слишком близко друг к другу, поэтому в идеале пункт назначения должен быть, по крайней мере, достаточно далеко, чтобы его можно было прокрутить.

  • Для элемента назначения убедитесь, что он имеет #id, бывший <div id='ID'...

  • Далее для каждого пункта назначения создайте один или несколько <a> nchors и установить их href значения как # +ID-. ех. <a href='#ID...

  • Если элемент назначения оказывается <a> nchor, мы можем использовать name атрибут также. ех. <a name='NAME'...

демонстрация 

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 </a>
      <a href='#a0'>Two-handed Weapon</a>
      <a href='#a1'>Cheapskates</a>
      <a href='#a2'>Devil Dance</a>
    </nav>

  </header>
  <hr>
  <section id='s0'>
    <h2>Section 1</h2>

    <p>Base save bonus checked cold dangers cold domain compulsion subschool constrict current hit points dead diminutive domain spell flank gargantuan hit hit die improved grab knocked down manufactured weapons movement modes negative energy plane off hand
      psionics result skill points spell version threat total cover transitive plane turn resistance turn undead undeath domain. Angel subtype caster level concealment continuous damage death domain energy drained extraplanar subtype guardinal subtype
      improved evasion lethal damage medium melee attack pounce rake subject <a name='a0'>two-handed weapon</a> undead type.</p>
  </section>
  <hr>
  <section id='s1'>
    <h2>Section 2</h2>
    <p>And it better be long as the troubles in my head hammer my bones on the anvil of daylight i'd buy some time i'm so tired don't know where to begin into your brother's cup just to see the dogs runnin on a blackboard night ringin' in my ears the information
      is ravenous you're acting like it's chill, when the deal's getting. And all the toilets are overflowing and i'm falling out of the conversation and the band playin' down below are those dogs or are those dogmas? black can spell to be day in the
      club tonight doldrums are pounding, <a name='a1'>cheapskates</a> are clowning this town flap your wings and leap out the window how do you play? she doesn't even know it's wrong she's the sister of avarice sipping the golden days on a riptide snooty.
      some static is lulling me to sleep talkin' to the devil and drinkin' a coke the dishes wash good to meet you in that land try not to drown where can you duck when they shoot you full of pigeon holes who are you? you said go.</p>
  </section>
  <hr>
  <section id='s2'>
    <h2>Section 3</h2>
    <p>A little knowledge is a dangerous thing. boys will be boys. curiosity killed the cat. cut your coat according to your cloth. do not bite the hand that feeds you. do not change horses in midstream. first impressions are the most lasting. he who hesitates
      is lost. if at first you do not succeed, try, try again. it is best to be on the safe side. kindness in words creates confidence. kindness in thinking creates profoundness. kindness in giving creates love. let the buyer beware. let your hair down.
      lightning never strikes twice in the same place. money makes many things, but also makes <a name='a2'>devil dance</a>. never speak ill of the dead. one might as well be hanged for a sheep as a lamb. penny wise and pound foolish. practice makes perfect.
      silence is golden. talk is cheap. the grass is always greener on the other side of the fence. the road to hell is paved with good intentions. there is no accounting for tastes. third time is a charm. to the victor go the spoils. walnuts and pears
      you plant for your heirs. you cannot make an omelette without breaking eggs..</p>
  </section>
</main>
<footer>
  <nav>
    <a href='#s0'>Section 1</a>
    <a href='#s1'>Section 2</a>
    <a href='#s2'>Section 3</a>
  </nav>
  <nav id='end'>
    <a href='#main'>Top </a>
  </nav>
</footer>

Источник

На самом деле это работает, но проблема в том, что тег blockquote находится сразу после тега привязки, но если вы сделаете пробел между ними, вы увидите анимацию в действии

вкратце: анимация будет работать только тогда, когда в окне появится полоса прокрутки, и между этими двумя элементами будет пробел, посмотрите на пример ниже, и вы увидите, что он работает

$(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>

Источник

Это работало, но у поставляемого кода не было высоты для прокрутки, а также не было плавной прокрутки. Если это не так, попробуйте это.

$(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>

Источник
Другие вопросы по тегам