2015-10-13 3 views
4

У меня гладкий свиток с якорем и его работой отлично. Но этот JS является конфликтом с плагином, который я использую, поэтому мне нужно изменить сценарий.Smooth scroll div to div

Я хочу вместо якоря, я хочу использовать div. Но я не знаю, как это делается.

Примечание: существует ссылка href, где ссылка на другую страницу.

Вот сценарий, который я использую в настоящее время.

jQuery.noConflict(); 
jQuery(document).ready(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; 
    } 
} 
}); 
}); 

Пример HTML, что мне нужно (я не знаю, если HTML в правильном формате):

<div id="#test"></div> 

<div id="test"></div> 

Обновлено:

Вот код от ответа ниже

jQuery.noConflict(); 
jQuery(document).ready(function($){ 
$('[data-anchor]').click(function(){ 
var target = $($(this).data('anchor')); 
    if (target.length){ 
     $('html, body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
    } 
}); 
}); 

Этот код работает, но если у div есть ссылка, указывающая на другую страницу, код не работает.

Пример HTML:

<div data-anchor="/testEnvironment/how-can-i-get-a-loan/#whocangetaloan"></div> 

Этот HTML является местом другой страницы

<section id="#whocangetaloan"></section> 
+1

Показать HTML-код, пожалуйста. –

+0

Для преходящих читателей - последний бит вопроса был решен с использованием обычных тегов 'a' для внешних ссылок. Код с атрибутами данных сделает такой же гладкий профиль страницы и оставит эти регулярные ссылки в одиночку. – Shikkediel

ответ

5

Если вы хотите иметь дивы вместо ссылок, атрибут данные может быть использован для обеспечения информации якоря. Разметка будет выглядеть примерно так:

<header> 
    <div id="menu"> 
    <div data-anchor="#home">Home</div> 
    <div data-anchor="#about">About</div> 
    <div data-anchor="#services">Services</div> 
    <div data-anchor="#projects">Projects</div> 
    <div data-anchor="#contact">Contact</div> 
    </div> 
</header> 

<section id="home"></section> 
<section id="about"></section> 
<section id="services"></section> 
<section id="projects"></section> 
<section id="contact"></section> 

И этот сценарий будет реализовать анимацию:

jQuery.noConflict(); 

jQuery(document).ready(function($) { 

$('[data-anchor]').click(function() { 

    var target = $($(this).data('anchor')); 

    if (target.length) { 

    $('html, body').animate({ 
    scrollTop: target.offset().top 
    }, 1000); 
    } 
}); 
}); 

Demo

Это сделает a теги больше не нужны, чтобы плавно прокручивать на якорь на странице. Ссылки на внешняя страница и якорь теперь могут использоваться обычно, если исходный скрипт не конфликтует.

Смежные вопросы