I have a link and trying to make it smooth scroll, it works but it makes all links active I just want it for this specific link no others
<div id="shelf">content</div>
$(document).ready(function () {
// Add smooth scrolling to all links
$("a").on('click', function (event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
Then be more specific in your jQuery selectors
Change:
And
$("a").on('click', function (event) {
For:
And
$("a#myspecificlink").on('click', function (event) {
Change
$("a").on("click", function(){ ... });
To
$("a#toshelf").on("click", function(){ ... });
And make this your HTML:
Click me!
Instead of using tag selector, use id selector as below:
<a id="a1" href="#shelf"></a>
<div id="shelf">content</div>
$(document).ready(function ()
{
$("#a1").on('click', function (event)
{
//Your code here
});
});
Related
I have a website where sections have # and menu items should scroll to them. Due to setup of website it's required that my URL have / (slash) at the end.
For example website.com/about/
So anchor would be website.com/about/#team/
When there's / at the end of URL, scroll to anchor doesn't work. I don't have any jQuery on website so simple jump to section doesn't work either. When I remove / it works.
Is there jQuery which I can use for that purpose? I tried bunch of jQuery but without success.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
});
});
As you said you cant change hash pattern then you have to do reverse process: remove dash from this.hash before putting $(hash).offset() method
$(document).ready(function(){
$('a').click(function(event) {
// Store hash
event.preventDefault();
var hashWithoutDash = this.hash.replace("/",""); // remove dash from hash to make $(hashWithoutDash).offset() worked
$('html, body').animate({
scrollTop: $(hashWithoutDash).offset().top
}, 1000, function() {
window.location.hash = this.hash; // keep actual hash with dash
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<p id="team">This is a paragraph.</p>
<div style ="height:1000px"> please scroll down to see href link </div>
team
<button>Return the offset coordinates of the p element</button>
When I apply this script, it goes to the link but I want it to go 120px above the content it is linked to.
Here is the code:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>
EDIT #02
Here is my HTML, CSS and Java for those who are wondering:
https://codepen.io/crosso_7/pen/WYegpY
Simply subtract the amount of pixels from your calculation.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== 0) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top -120
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
the problem is window.location.hash = hash; after animate it do second action which is same with default action. Replace it with history.pushState(null, null, hash); to rewrite the url history and add hash
$('html, body').animate({
scrollTop: $(hash).offset().top - 120
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior)
//window.location.hash = hash;
history.pushState(null, null, hash);
});
I have this JS which works but then it starts to scroll before the page completes loading. Is there a way to check page loading and then load for that smooth effect?
jQuery(document).ready(function(){
var href = window.location.href+'#team';
var splitit = (href.split('#'))[1];
if(splitit !== "" || splitit !== "undefined"){
jQuery('html, body').animate({
scrollTop: jQuery('#'+splitit).offset().top - 50
}, 2000);
}
});
Also, what does splitit do? Can we remove it?
The split() method is used to split a string into an array of substrings, and returns the new array.
var str = "How are you doing today?";
var res = str.split(" ");
//result is array [How,are,you,doing,today?]
Remove for what?
Splitit needed for checking is in url '#'-symbol or not empty url after '#'.
Try load event that runs when the page is fully loaded including graphics.
jQuery( window ).load(function() {
// Run code
});
For this functionality, you can utilize modern browsers css:
html {
scroll-behavior: smooth;
}
but I recommend this approach: call smoothScroll() in document.ready
function smoothScroll(){
// this part will add ID's to the named anchor tags
// please name tags names not to interfere with other elements id's but
// also will look good in addressbar, as : #ListOfFeaturedProductsSection
$("a").each(function(){
var t=this;
if (t.name!=="" && t.id==""){
t.id=t.name;
}
});
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
var hash = this.hash;
if (hash) {
event.preventDefault();
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
}
});
}
splitit is the id attribute of the target to what the page should be scrolled.
Actually it is not so obviously how to check that all resources are loaded, but you can put this jquery code in the end of your page before , i think, it helps you partly.
I have the following script that allows me to add an anchor-link with a .class attached to my HTML document, which would then scroll the user to a position on the webpage when clicked on.
HTML:
<li class="about-scroll">About</li>
JavaScript:
$('.about-scroll').click(function () {
$('body,html').animate({
scrollTop: 646
}, 1600);
return false;
});
This works fine, however, as the content isn't always static (drop-down accordions, a responsive layout etc.), how would I be able to scroll to a specific #div or section tag rather than a numeric value on the page?
Example:
<div class="about">
<h3>About</h3>
...
...
...
</div> <!-- end .about -->
Give the h3 an id, say header. Then, you would reference the click event by using href="#header"
HTML
<h3 id="hi">HIIIIII</h3>
Scroll to Top
jQuery
$('a').on('click', function (e) {
e.preventDefault(); // prevents default action of <a>
var target = this.hash, // gets the href of the <a>
$target = $(target); // puts it as a selector
$('html, body').stop().animate({
'scrollTop': $target.offset().top // scrolls to the top of the element clicked on
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Fiddle
The great thing about this function is that it is reuseable
If you're OK with no animation you can go with the answer which says just give the element you want to go to an ID and reference it with href="#the_id_you_placed"
for animation, you can still use the ID, but find the offset and animate to there:
$('.about-scroll').click(function () {
$('body,html').animate({
scrollTop: $('#the_id_you_placed').offset().top
}, 1600);
return false;
});
I'm using a simple piece of code inorder to have internal links scrolls to specific divs. It works they way I intended but it also reloads the page. The scroll works perfect, just that I need it to not reload the page. Also if this matters, Im using this inside a Wordpress theme I created.
HTML:
This may sound crazy, So hire me maybe?
<div id="hiremenow"></div>
SCRIPT:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
void(0);
});
});
});
Return a false value.
$('a[href^="#"]').on('click',function (e) {
//whatever...
return false;
});
This means "the click event has been handled, do not perform the standard action".