Smooth Scroll blocks anchor link to other page - javascript

I am working on my portfolio website but I don't get the anchor links to work.
On the website you click on a case to view the details and after that I want to link back to the portfolio part of my website. I used anchor points to achieve this but my smooth scrolling is blocking the anchor links to another page. (I does work when I just link to the index but not when I add the anchor point & it also works when I remove the smooth scroll)
Does anyone know how I can fix this problem?
HTML:
<div class="menubalk" id="basic-menubalk">
<!-- logo -->
<a href="../index.html" class="logo-link">
<div class="logo"></div>
</a>
<ul class="menu" id="basic-menu">
<li>Terug</li>
</ul>
</div>
Javascript:
$(document).ready(function(){
"use strict";
$("a").on('click',function(event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});

The problem is the condition in your JavaScript code. if (this.hash !== "") { will evaluate to true for every link that contains a hash, not just the ones on your current page.
Instead you could use:
if (this.attributes.href.value.substr(0, 1) === '#') {
Additionally, I would not use that jQuery script for smooth scrolling at all. There is a W3 standard that already works in some browsers (e.g. Firefox). And for the browsers that do not support it, you can use a polyfill (e.g. iamdustan/smoothscroll).

Related

jQuery scroll to section on another page

I have a website which uses jQuery to scroll between a few sections (in page1.html). Now, I added another page to the website (page2.html).
I would like the links in the header of page2.html to link back to the corresponding section in page1.html.
In page2.html I wrote:
<li>Home</li>
This links back to page1.html#splash. But on page1, the site does not scroll to the respective section.
My JavaScript is:
$(document).ready(function(){
$('a[href=\\#]').click(function(e){
e.preventDefault();
$('nav').removeClass('visible');
$('html,body').stop().animate({scrollTop: $('.'+$(this).data('scrollto')).offset().top-65 }, 700, 'easeInOutExpo', function(){});
});
What I already tried:
I attempted to add the following code, found elsewhere, to page1.html:
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}
});
});
</script>
But there is no scrolling to the right section and the console put out the following error: index.html:19 Uncaught ReferenceError: $ is not defined
Frankly, I am stuck at this point due to lack of expertise in this field.
How do I manage that the site actually scrolls to the right section when coming from another page?
Once you have left the page, the JavaScript from the previous page can't control it. So, you'll need to use jQuery to handle it on the new page when it loads. Place this code on page1.html, changing the comment to the scroll command:
$(document).ready(function() {
if (window.location.href.includes('#splash')) {
let animationTime = 100;
$('html, body').animate({
scrollTop: $('.splash').offset().top
}, animationTime);
}
});
Uncaught ReferenceError: $ is not defined
gives this type of error when your page doesn't get the JQuery

Anchor links from external pages don't work when using jQuery smooth scrolling code

I'm not a JS developer, and I'm using Bootstrap to build a one-page site with anchor links.
I'm using whatever bits and pieces of JS code I find for some necessary features, such as adding smooth scrolling to the anchor links, with top offset because I'm using a fixed/sticky menu.
While it's a one-page website, I'm using Privacy and Terms as separate pages.
This is the code I'm using for the anchor links on the homepage. I think it's a mix of JS and jQuery. It works well and the way I want.
$('.navbar a, .smooth-scroll-contact').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. */
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 800, function(){
/* Add hash (#) to URL when done scrolling (default click behavior). */
if (history.pushState) {
history.pushState(null, null, hash);
}
else {
window.location.hash = hash;
}
});
} // End if
});
While it works fine on the homepage, it prevents the menu links to open on the Privacy and Terms pages. It doesn't do anything when clicking the menu links there. It doesn't go to the homepage or any of the anchor links there.
This is the error that appears in the Console when clicking on the menu links, while on the Privacy or Terms page:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (custom.js:39)
at HTMLAnchorElement.dispatch (jquery-3.4.1.min.js:2)
at HTMLAnchorElement.v.handle (jquery-3.4.1.min.js:2)
The 39th line is scrollTop: $(hash).offset().top - 70.
I searched for this error and tried to apply some fixes that I found, but they didn't work for me or I didn't know how to implement them correctly for this particular code.
Additional notes:
If I remove the smooth scrolling code, the problem is solved;
The custom.js file, where the code is found, is loaded before </body>;
jQuery is the first script loaded.
If you need more info, let me know.
I finally managed to find a solution after more research. Here's the new code, in case someone else will encounter the same issue:
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// 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
// - 70 is the offset/top margin
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 800, function() {
// Add hash (#) to URL when done scrolling (default click behavior), without jumping to hash
if (history.pushState) {
history.pushState(null, null, hash);
} else {
window.location.hash = hash;
}
});
return false;
} // End if
});
event.preventDefault(); seems to have been the problem, so it was removed. return false; was added.
Also, as a bonus, here's a code that allows smooth scrolling with offset to anchor links from external pages:
$(window).on("load", function () {
var urlHash = window.location.href.split("#")[1];
if (urlHash && $('#' + urlHash).length) {
$('html,body').animate({
scrollTop: $('#' + urlHash).offset().top - 70
}, 800);
}
});

jQuery smooth scroll for WordPress not working

I've been trying to make my links work on my theme I am creating but I have no knowledge of jQuery for the smooth scrolling. In my theme I used the following jQuery I saw was working online:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
In my dynamic WordPress menu I set the urls to #values, #about, #contact etc. and the links to it on the specific places on the page I used <span id="values"></span>, <span id="about"></span> and <span id="contact"></span>
It works, but the smooth scrolling doesn't work. I see that anchors are used for smooth scrolling online in the parts of the page but I want to be able to target the id of the span tags. I tried to make an anchor tag to test if it works but it still doesn't.
How do I get this to work?
Miro replied in the comments the correct answer - "In Wordpress you need to add external jquery or equate the dollar sign to the one already in use. Try adding $ = jQuery; above all your scroll code. If that doesn't work replace all $ with jQuery."

jQuery smooth scrolling on a different webpage

I have managed to get the smooth scrolling working on a single page using the following code.
Note the HTML link is stored in a header.php and used across multiple pages below is a code snippet:
HTML Script:
<a class="item" href="index.php#contact">
<a name="contact"></a>
JS Script:
$('a[href="index.php#contact"]').click(function (e) { // user clicks on html link
e.preventDefault(); // prevent the default behaviour that occurs in the browser
var targetOffset = $('a[name="contact"]').offset().top; // define a variable to point at a particular section & offset from the top of browser
$('body').animate( // create animation
{ scrollTop: targetOffset }, 1000); // scrollTop property = target variable
});
Problem:
When I go to a different webpage and click the contact link it does not link back to the index.php#contact and scroll down to the contact anchor point.
Any assistance or advice is much appreciated I'm sure its a simple tweak in the code somewhere.
Check your href it's supposed to be: index.php/#contact

jquery smooth scroll to an anchor in wordpress

I'm trying to implement jquery smooth scroll to an anchor after clicking the menu item in the wordpress. I'm using this example:
http://jsfiddle.net/YtJcL/
Here is the js file:
$(".anchor_scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 5000,'swing');
});
In my wordpress page I create a section:
<section id="services"></section>
and in the wordpress custom menu put a class "anchor_scroll" to a link:
<a class="anchor_scroll" href="#services">.
After this I'm able to navigate to an anchor in the page after pressing the link, however, the jquery code seems to be not working, because there is no smooth slide effect, just jump.
Here's the code I would use for this;
$(".anchor_scroll").click(function(){
var section = $(this).attr('href');
$('html, body').animate({
scrollTop: $(section).offset().top - 15
});
});

Categories

Resources