Jquery Smooth Scroll To DIV - Using ID value from Link
Ids are meant to be unique, and never use an id that starts with a number, use data-attributes instead to set the target like so :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric" onclick="return false">0-9 |</a>
<a class="searchbychar" href="#" data-target="A" onclick="return false"> A |</a>
<a class="searchbychar" href="#" data-target="B" onclick="return false"> B |</a>
<a class="searchbychar" href="#" data-target="C" onclick="return false"> C |</a>
... Untill Z
</div>
/*-----where data-target="this is your div id name" ------*/
/*-----start making your divisions below --------*/
<div id="A">
<p>some content</p>
</div>
<div id="B">
<p>some content</p>
</div>
<div id="C">
<p>some content</p>
</div>
... Untill Z
As for the jquery :
$( '.searchbychar' ).on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="searchbycharacter">
<a class="searchbychar" href="#" data-target="numeric" onclick="return false">0-9 |</a>
<a class="searchbychar" href="#" data-target="A" onclick="return false"> A |</a>
<a class="searchbychar" href="#" data-target="B" onclick="return false"> B |</a>
<a class="searchbychar" href="#" data-target="C" onclick="return false"> C |</a>
... Untill Z
</div>
/*-----where data-target="this is your div id name" ------*/
/*-----start making your divisions below --------*/
<div id="A">
<p>some content</p>
</div>
<div id="B">
<p>some content</p>
</div>
<div id="C">
<p>some content</p>
</div>
... Untill Z
$( '.searchbychar' ).on('click', function(event) {
event.preventDefault();
var target = "#" + $(this).data('target');
$('html, body').animate({
scrollTop: $(target).offset().top
}, 2000);
});
No comments:
Post a Comment