URL href failing: Anchors, URL, and Javascript - javascript

I am using javascript for smooth scrolling (in script tags below) and also have href for anchor links. All of the anchors are working fine but the javascript appears to be disabling the href for the URL. Can you help me rewrite this so that works as well?
<ul class="snip1143">
<li class>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog </li
<li>Contact</li>
<script>
$(document).on('click', 'a', function(event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
</script>

event.preventDefault() is going to prevent the default, which for anchors is going to that url. You probably want to add a class to the anchors that you want to animate and select only those instead of preventing default on all anchor tags.

Acutally since you have unique data-hover for each element, all we have to do then is filter it by validating the value of their data-hover attribute.
<script>
$(document).on('click', 'a', function(event) {
if($(this).data('hover') !== "Blog"){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
}// since i noticed that you want to redirect the page once the Blog link is clicked
});
</script>
Let me know if this helps you with your problem.

Related

Disable Smooth Scrolling on Non-Anchor Hash Link?

I have some jquery for smooth scrolling:
$(document).on('click', 'a[href^="#"]', function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top
}, 1400);
});
Which works fine, except that I have some tabs on the page that use a hash link also. When you click each tab, the page scrolls to the top of the screen.
Is there a way to make this smooth scroll work, only when a specific anchor is added to the hash (like /#features) and not work when it is a hash only (like /#)
You can add a :not() selector to eliminate href="#" from triggering your click event.
$(document).on('click', 'a[href^="#"]:not([href=#])', function(event) {
console.log("Clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hash Only
Anchor 1
Anchor 2

Smooth scroll script blocking links

I am using the following script to smooth scroll to anchor points on my web page. The problem I am having is that I have a couple href links to different pages but this seems to be blocking them from opening. Can only open them by right clicking 'open new tab'.
Any help much appreciated. Thanks.
$(document).on('click', 'a', function(event){
event.preventDefault();
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
});
Managed to fix this by removing event.preventDefault()

Variable not passed into jQuery scroll function

Can someone help me understand why this is not working:
jQuery(".page-code .opening .button").click(function(event){
event.preventDefault();
var id = "#" + event.target.id;
alert(id);
jQuery('html, body').animate({
scrollTop: jQuery(id).offset().top
}, 500);
})
The anchor links exist in various parts of the page, the alert is giving me proper id that I need, but the page is only scrolling a tiny bit no matter which button I click. Not sure what I'm missing here.
You're setting up the destination of the scroll to be the element that was just clicked. If you want to scroll to the element that the link points to, you need to use the href attribute (assuming your buttons are a tags):
jQuery(".page-code .opening .button").click(function(event){
event.preventDefault();
var id = "#" + jQuery(this).attr('href');
alert(id);
jQuery('html, body').animate({
scrollTop: jQuery('body').offset().top
}, 500);
})
If you would you like to do that user click to .page-code OR .opening OR .button elements then add comma to between them.

Removing anchor tags from URL

I'm using a bunch of anchor tags for mobile browsing due to a very long page but when the anchor tag is clicked it adds it to the url. Here is a small mock,
page down
<span id="anchor"></span>
How can I retain the anchor functionality and prevent #anchor being added to the url?
Cheers
You could use scrollTop to achieve the same effect:
$('.js-hook--page-down').click(function (e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $("#anchor").offset().top - 200
}, 1500);
});
And the HTML:
<a class="js-hook--page-down">page down</a>
<span id="anchor"></span>
You need a new js hook for each of the page anchors though.
It's up to you how you'd want to go about it, but I would do this:
<script type="text/javascript">
$(window).on('hashchange', function(e){ // listen if hashtag is being added to the URL
location.href = location.href.replace(location.hash,"") //replace it with nothing
console.log("bam!"); //enjoy it
});
</script>
#DGibbs I took your code an modified it so that rather than having to write it out for each anchor on the page you can use this instead
$('.js-anchor').click(function (evt) {
evt.preventDefault();
var anchor = $(this).text();
$('html, body').animate({
scrollTop: $('#' + anchor).offset().top
}, 1500);
});
Maybe this will help someone else too. For reference the html looks like this
<a class="js-anchor">Top</a>
<span id="Top"></span>
Obviously with this code your anchor id must match the text inside the link for it to work
Add click event listener to your links and use preventDefault.
$('.mylink').click(function(event){
event.preventDefault();
});
This will stop the links from modifying the urls.

link to anchor on different page and scroolTo anchor using JQuery

How would I link to an anchor on another page but when the new page loads also scrollTo the anchor?
Below is the JQuery when my anchro link is on the same page I need to tweak it so that is also animate when the linked clicked
html:
<li>My Link</l1>
My JQuery:
$('.faq_section li a').click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top - 20
}, 600);
});
Page2.php:
<div id="about-us"></div>
You can do with following method
By clicking u can send some condition in URL and check that in jquery
E.g. xyz.com?p=scroll
Then in jquery on document.ready function check if 'p=scroll' is present by using indexOf. If yes then run your animate code (note. Above jquery code needs to be in output page)
Or try this http://webdeveloperswall.com/javascript/scrolling-to-different-areas-on-same-page

Categories