We Keep Coding

How to scroll to element after click event and new page load with Vanilla JavaScript

I will try to summarize this in a Requirements fashioned way, I hope this simplifies the question.
When clicking on an anchor tag, the web page navigates the user to a new page, where upon page load, the page is scrolled to the element which corresponds to the aforementioned anchor tag, which was previously clicked.
As you will see in the code I am trying to make use of the CSS scroll-behaviour property.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior
So far I have tried out the code bellow, however when I run it I get an error message in the developer console stating:
TypeError: Cannot read property 'offsetTop' of undefined
Hence, I surmise that the window.onload function is not really fired on the page which I would like to load but the very same page on which I am located when clicking the anchor tag. How can I change the code so it would count for page intended.
HTML of Page A (where the anchor tag is located):
<a id="ship-it" href="services.html" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
HTML of Page B (where the target element is located):
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2> <span>Manufacturing</span> <br> We provide high quality, low cost solutions to meet your requirements.</h2>
<p>
soemthing something something, DarkSide...
</p>
</div>
</section>
JS / CSS:
function scrollIt(element) {
window.scrollTo({
'behavior': 'smooth',
'left': 0,
'top': element.offsetTop
});
}
const serviceAnchor = document.querySelectorAll('.services');
//'serviceAnchor' is located on page A
const sections = document.querySelectorAll('.section');
// 'sections' is located on page B and represents the element the page should scroll to when the page has loaded after the corresponding anchor tag was clicked
serviceAnchor[0].addEventListener('click', () => {
window.onload = scrollIt(sections[0]);
});
serviceAnchor[1].addEventListener('click', () => {
window.onload = scrollIt(sections[1]);
});
serviceAnchor[2].addEventListener('click', () => {
window.onload = scrollIt(sections[2]);
});
serviceAnchor[3].addEventListener('click', () => {
window.onload = scrollIt(sections[3]);
});

The reason you're getting the error is it's impossible to run javascript across page loads. Assuming you're using a traditional site and not a single-page app, when the browser loads a new page, all javascript on the current page is stopped.
Browsers already support jumping to an element on page load using the www.site.com#myElementId syntax. If you want smooth scrolling, you'll need to pass the id of element to scroll in the url, or some other way like caching its id in localstorage, then run your smooth scrolling js on the pageload of the other page.

You can't navigate to a different page and then ask the browser to launch a piece of JavaScript. That would be a huge security issue, since I could make you click into a link to, let's say, my-bank.com then do a bit of JavaScript do access your secret cookies or local storage and hack into your account.
The only thing you can do is link to anchors inside the linked page, and the default scroll behavior (no smooth scrolling, for most browsers, since it's the least computationally and resources intensive) will be used:
<!-- not possible -->
<a onclick="navigateThenDoSomething()">Some link</a>
<!-- possible -->
Some link
If you own the target page, however, you can hide a target section in the query string then do a bit of magic in the target page's onload to smoothly scroll to your section:
<!-- source-page.html -->
Some link
// script running at target-page.html
const url = new URL(window.location);
const section = url.searchParams.get('section');
if (section) {
// scroll smoothly to `section` using
}

Since .scrollTo JS method with options has the same browser compatibility as scroll-behavior CSS property, and you're OK with that, you might get rid of your JS code and set:
html, body, .or-other-scrolling-container {scroll-behavior:smooth}
and use anchor links.
So HTML of Page A would be e.g.:
<a id="ship-it" href="services.html#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="/images/shipping.jpg" alt="">
</div>
</div>
</a>
And HTML of Page B (please note <a name="#manufacturing"> tag):
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="/images/manufacturingMelting2.jpg" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Working example:
html {scroll-behavior:smooth}
.long {height:100vh; background:#efc}
<a id="ship-it" href="#manufacturing" class="services">
<div id="image-container_4">
<div id="image_4">
<div id="overlay_4"></div>
<h2 class="h2">We pack it and ship it</h2>
<img id=imageB src="https://picsum.photos/50/50" alt="">
</div>
</div>
</a>
<section class="long">Placeholder to enable scroll</section>
<a name="manufacturing"></a>
<section id="manufacturing-section" class="section">
<img src="https://picsum.photos/400/220" alt="Magnetic Particle Inspection">
<div id="manufacturing-container">
<h2>
<span>Manufacturing</span><br>
We provide high quality, low cost solutions to meet your requirements.
</h2>
<p>something something something, DarkSide...</p>
</div>
</section>
Hope it helps.

HTML link including current url for no reason

so I have this code here and I have it set up so when I click the button, it changes the footer. The issue is that when I click the link, it includes the current website url before the url I typed. How can I stop this so that when the link is clicked it only goes to the url I had typed? Example: I type www.profile.com as the url in JS but when I run the file and click on it in-browser it would take me to www.currentWebsite.com/currentFile/www.profile.com
Thanks!
HTML
<button onclick="changeFooter()">change footer</button>
<footer class="footer footer-black footer-big">
<div class="container">
<div class="theme-bottom-footer-content">
<div class="theme-bottom-footer-content">
<ul id="menu-social-links-menu" class="footer-menu pull-left"><li id="menu-item-46" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-46">Yelp</li>
</ul>
<div class="copyright pull-right">
Theme | Powered by WordPress </div>
</div>
</div>
</div>
</footer>
JavaScript:
function changeFooter(){
$(".copyright.pull-right").html("Website | Created by by <a href='www.portfolio.com' target='_Blank'>My Name</a>");
// alert("inside change footer");
//document.getElementsByClassName('copyright pull-right').innerHTML = "hi";
}

Whenever you are handling URLs it is always best to use them with protocols (http, https, ftp) to prevent the browser to interpret them as a path rather than a URL. That is what is happening in your case.
As #grovesNL mentioned you can check and pre-pend protocol to the given domain name. Here is the updated code.,
function changeFooter(){
$(".copyright.pull-right").html("<p>Website | Created by by <a href='http://www.portfolio.com' target='_Blank'>My Name</a></p>");
// alert("inside change footer");
//document.getElementsByClassName('copyright pull-right').innerHTML = "hi";
}
I'd recommend you to use http:// unless if you are sure that webpage is served over https://, if you don't want your users see a warning from browser.

You can simply prefix the URL in your JavaScript code with http:// or https:// (whichever is appropriate) to create an absolute URI.
By default the URL you have listed is interpreted as being relative to the current path. If you're interested, some examples are already listed in another StackOverflow answer.

How to make webpage not scroll to the top when data displayed on it changes

Sorry for weird title, but couldn't find better explanation.
I have spring webapp, which on one page has content similar to social network. In angularjs controller I have an array in which I store posts to be displayed on view. So with ng-repeat I am displaying the content of that array in controller. On the bottom of the page I have button that loads more posts (since I don't want all possible posts to be displayed at once), and I append new posts to array, and the list on actual page updates and show loaded posts, but when I click on that button that loads more posts browser scrolls to the top of the page, is there a way to somehow disable that scrolling to the top?
This is the shortened version of my code.
html:
<div class="main" ng-model="activities" ng-repeat="activity in activities">
<div class="helper" >
<center>
<p><img alt="{{activity.user.username}}" ng-src="pictures/{{activity.user.picture}}" height="50px"> </img> </p>
<p><a href="#" >{{activity.user.username}} </a></p>
<br />
<p class="date">{{activity.activity.datum}} </p>
<p>
{{activity.activity.tempo}}/km {{activity.activity.distance}} km</p>
<br />
</center>
</div>
<br/><br/>
</div>
<center>Load more</center>
</div>
js
$scope.loadMore = function(){
$scope.getActivities(3 , $scope.currentPage+1 , $scope.loggedInUser.username).then(function(response){
$scope.currentPage++;
for(var i = 0; i<response.length; i++){
$scope.activities.push(response[i]);
}
});
}
Every time $scope.activities is changed, that change is shown on the view automatically, but it also scrolls the page to the top.

<a href="#"> takes you to the top of the page. To prevent that behavior from your links, you can do any of the following
Use href="#!" (where ! is not an id of any element on the page)
Use href="javascript:void(0)"
Omit the href attribute completely, and style the link using CSS
See this question for more information.

How to remove AddThis fragment identifiers (hash) from Facebook button? (Twitter's worked)

I'm trying to use Twitter and Facebook AddThis buttons in my Web app, and don't like to use those redundant fragment identifiers. However, for some reasons when I disable its tracking functionality in my app, it works only on Twitter button and not on Facebook button. I don't see any differences between the two buttons code...
Anyway, here's my code snippet:
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_2 btn-addthis" addthis:url="path/to/my/url"></a>
<a class="addthis_button_preferred_1 btn-addthis" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<script type="text/javascript">
var addthis_config = addthis_config||{};
addthis_config.data_track_addressbar = false;
addthis_config.data_track_clickback = false;
</script>
I implemented the second <script> in order to disable the fragment identifiers. However, when I tapped the Twitter button, the hash was successfully removed completely and just the url was there. However, the Facebook button didn't work, and the hash remained to be there for some reasons.
Why does this occur? I tried to move the second <script> tag before the first <script> but it didn't change at all (by the way which <script> should I write the first?)
And also, the reason I swapped the button with .addthis_button_preferred_1 with the one with .addthis_button_preferred_2 is that I want to display the twitter button before the Facebook button, but for some reasons, it's not swapped properly at times (about 15 ~ 20 % of the time) and the Facebook button is displayed first for some reasons... Maybe the whole AddThis functionality doesn't work...?

You should not use preferred if you want facebook and twitter only. Because if you use preferred it will set the share buttons to that users preferred social community. addthis_button_facebook for facebook and addthis_button_twitter for twitter.
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook" addthis:url="path/to/my/url"></a>
<a class="addthis_button_twitter" addthis:url="path/to/my/url/same/with/the/above"></a>
</div>
I don't think you need the script, but if you do try instead to remove the class addthis_toolbox.

how link to magento review form in a specific jquery tab from outside

I am using a magento template which uses jquery.tabs.min.js for displaying different product information in different tabs.
Now I would like to send customers mails with a direct link to the review form, which is at the end of the third tab.
Unfortunatly the page if called from outside always opens with the first tab open.
So sending links with an additional hash from the tab id does not work.
I have already looked around many similiar threads but unfortunatly I am not very familiar with javascript, and I would need a realy detailed help, how to work this out and espacialy where to put the different snippets (i.e. inside the html of the page or in the js-file).
Something thar makes it maby more difficult is, that it would be helpful to not only open the third tab, but as well scroll down to the "review form" which is inside the third tab, at the bottom, and if there are more than a few reviews the visitor would not see the review directly.
So here is the html snippet, which represents my pages structure
<div id="product-tabs" class="gen-tabs gen-tabs-style-f">
<ul class="tabs clearer">
<li id="tab-description"><a class="current" href="#">Beschreibung</a></li>
<li id="tab-additional">Zusatzinformation</li>
<li id="tab-tabreviews">Bewertungen</li>
<li id="tab-product.tags">Schlagworte</li>
</ul>
<div class="tabs-panels">
<h2 class="acctab" id="acctab-description">Beschreibung</h2>
<div class="panel"> <h2>Details</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-additional">Zusatzinformation</h2>
<div class="panel"> <h2>Zusatzinformation</h2>
CONTENT
</div>
<h2 class="acctab" id="acctab-tabreviews">Bewertungen</h2><div class="panel">
<div class="box-collateral box-reviews" id="customer-reviews">
CONTENT OF CUSTOMER REVIEWS
<div class="form-add">
<h2>Schreiben Sie Ihre eigene Kundenmeinung</h2>
<form action="http://www.mydomain.com/review/product/post/id/8/" method="post" id="review-form">
-->>HERE IS MY REVIEW FORM<<--
</div>
</div>
<h2 class="acctab" id="acctab-product.tags">Schlagworte</h2><div class="panel">
<div class="box-collateral box-tags"> <h2>Schlagworte</h2>
CONTENT
</div>
</div>
Thanks a lot for any help in advance.
Update:
Maybe it is possible to extend the already existing function which routes the visitor "on click" directly to the review form, to work as well, depending on a parameter given with the URL (ie. a hashtag) ? Here is the peace of code from the template:
<?php //Open the "Reviews" tab, when "X Review(s)" or "Be the first to review this product" links are clicked ?>
<script type="text/javascript">
//<![CDATA[
jQuery(function($){$("#goto-reviews, #goto-reviews-form").click(function(){if($("#product-tabs").hasClass("accor")){$("#product-tabs .tabs-panels").data("tabs").click($(".tabs-panels .acctab").index($("#acctab-tabreviews")))}else{$("#product-tabs .tabs").data("tabs").click($("#tab-tabreviews").index())}})});
//]]>
</script>
If anybody could help me with that? Should be somehow easy if one have skills in JS ;-)

Have you tried adding the ID of the tab to the query string?
Http://www.mysite.com/product-URL.html#acctab-tabreviews
Adding the I'd portion of the li element with a hash should work