HTML Якорная ссылка плавная прокрутка

Question

Я пытаюсь сделать привязку, где, когда вы нажимаете на нее, прокрутите вниз до другого элемента. Я пытался сделать это с ответами из предыдущего вопроса: Smooth scrolling when clicking an anchor link Используя этот код из него

$('a[href*=#]').click(function(event){ 
$('html, body').animate({ 
    scrollTop: $($.attr(this, 'href')).offset().top 
}, 500); 
event.preventDefault(); 
}); 

Когда я использую этот код с этим HTML

<a id="des" href="#scroll"> 
<img name="scroll" id="scroll" src="whatever"> 

Это не гладкий свиток, но вместо того, чтобы мгновенно прыгай сюда. Он также не прыгает в нужное место. Он перескакивает под изображение, чтобы вы не могли видеть изображение.

Что я пытаюсь сделать: я пытаюсь это сделать, когда я нажимаю на этот элемент привязки, он плавно прокручивает это изображение, не сокращая его. Я имею в виду, когда я делаю это сейчас, он пропускает изображение.

Answer 1

Это сделает то, что вы хотите. Это от кого-то здесь, в StackOverFlow. Однако я не помню, какой пользователь.

$(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 
     }, 800); 
     return false; 
     } 
    } 
    }); 
}); 

Edit: Кроме того, это то, что я сделал, если есть фиксированная нав наверху. Это компенсирует сумму для вашего навигатора.

В CSS

a.anchor { 
     display: block; 
     position: relative; 
     top: -45px; //or what ever the set px amount you have set to your nav 
     visibility: hidden; 
} 

И использовать этот якорь тег прямо перед вашим изображением тега

<a class="anchor" id="WhateverYourHerfIs"></a>