Smooth scrolling div for div

I have a smooth scroll with an anchor and its work. But this JS is in conflict with the plugin that I use, so I need to modify the script.

I want instead of anchor, I want to use div. But I do not know how to do this.

Note. There is a href link, where there is a link to another page.

Here is the script I'm using right now.

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

An example of the html I need (I don't know if html is in the correct format):

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

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

Updated:

Here is the code from the answer below

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

This code works, but when the div has a link pointing to another page, the code does not work.

Html example:

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

This html is hosted on another page.

<section id="#whocangetaloan"></section>
+4
source share
1 answer

divs , . :

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

script :

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

, a . script.

+5

Source: https://habr.com/ru/post/1611358/


All Articles