I want to find data in HTML with tag search input, when it is clicked to "find" it will scroll to where the data is placed.
$(function() {
$('#searchBar').on('click', function(){
if(searchBar.value == '.profiles'){
var target = $('.profiles');
target = target.length ? target : $('[name = reynaldo' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
That's the code I tried, please help me
Related
Link to jsfiddle - https://jsfiddle.net/dn5t2mwm/3/
$('a.item_link').click(function(){
var hash = this.hash, top = $(hash).offset().top;
console.log(hash, top);
$('html, body').animate({
scrollTop: top
}, 500);
return false;
});
I want to make smooth scroll. But when i account coordinates of link with anchor it returns different results. It looks like it accounts coordinates from the start of viewport - not a start of document. It works on codepen, but doesn't work on local and jsfiddle. css is disabled. Maybe you know what is wrong with it?
Use this piece of code:
$('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;
}
}
});
I need the smooth scroll to be offset by 100px. So far I have this:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
This gets my link moving! But how can I add .offset().top > 100 to this? I am having issues figuring it out if anyone can help out.
Sounds like you have a fixed navbar. Assuming your anchors are empty:
<a class="anchor" id="foo"></a>
Just offset the anchors in css:
.anchor {
top: -100px;
position: relative;
display: block;
}
Alternatively you can offset the scrollTop by updating your javascript:
scrollTop: $($anchor.attr('href')).offset().top - 100
ve1jdramas Hi there.
Have a look at this link here.
In this example, they use + or - .
Like this...
scrollTop: target.offset().top -100
or
scrollTop: target.offset().top +100
Try this and see if you can get this to work for you.
Or use this full code.
$(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 -100
}, 1000);
return false;
}
}
});
});
I got this script to use on my project, one single page with scroll. Now my problem was everytime the page scrolled on the exact section the title always been hide by my fixed menu. Below are the script
$('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
}, 1500,'easeInOutExpo');
return false;
}
}
});
Hope you guys can help me.
Many thanks!
You'll need to take into account the height of the fixed header when applying scrollTop
If my comment wan't clear enough, try this.
$('a[href*=#]:not([href=#])').click(function() {
// does the pathname of this link match that of the current location.pathname?
var activeLink = (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,''));
if (activeLink || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
// here we will take into account the height of #navbar
var offset = target.offset().top + $('#navbar').height();
$('html,body').animate({
scrollTop: offset // apply our new offset
}, 1500,'easeInOutExpo');
return false;
}
}
});
I'm using the the JavaScript code below to create a scroll effect from my nav to the anchor.
The problem I am having is I want the scrolling to stop 100px above the anchor.
What would I need to change in this code to achieve this result?
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 1000);
return false;
});
});
Thank you
Subtract 100 pixels from target.offset().top. like so:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top-100 }, 1000);
return false;
});
});
Everything is working as it should, however the URL does not change when the jQuery is in place. Is there anyway to have it smooth scroll and change the url at the same time? I tried a different method before this however it wasn't as cross browser compatible as this.
My HTML is:
<li class="representing-you-online">Representing you online</li>
<li class="developing-your-people">Developing your people</li>
My jQuery is:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500);
return false;
});
});
$(document).ready(function(){
$('#logo a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Thanks!
Replace the click handling code for your anchors like this:
$(document).ready(function() {
$('a[href^="#"]').click(function() {
var target = $(this.hash);
var hash = this.hash;
if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');
if (target.length == 0) target = $('html');
$('html, body').animate({ scrollTop: target.offset().top }, 500, function (){
location.hash = hash;
});
return false;
});
});
Please note the complete function in the end of the jquery .animate(). It changes the URL.
See the demo here.