Modify an internal href link for only narrower screens - html

Question

I have an 'overview' html page with lots of product images - each image links to a page that may have 3 or 4 products, eg, src="gadgets-1.html"
On desktop, on the destination page the user can see most products or can easily scroll down if needed.
But on narrow screen where the css MQs convert all columns to 100% width, the last items are not necessarily in view and the user must intuit that it's necessary to swipe down the page, so I want the linking image to link directly to the relevant item on the destination page.
I've established anchor links which work well, eg, src="gadgets-1.html#red-thing" but I don't want the '#red-thing' to be active on wider screens.
To resume, I want the link to be gadgets-1.html on wider screen and
gadgets-1.html#red-thing on narrow screen.
I don't see how this can (or should) be done with css. Should js or php be used? If so, how?

Answer 1

There are a couple of solutions I can think off of the top of my head. I don't usually like using javascript to modify the DOM based on screenwidth but it is an acceptable solution if you are so inclined.
OR you can do something simple like this:
<div class="links">
<a class="mobileLink" href="gadgets-1.html#red-thing">gadgets-1</a>
<a class="desktopLink" href="gadgets-1.html">gadgets-1</a>
</div>
with some css to hide the right link based on screen width
.mobileLink{
display: none;
}
#media screen and (max-width: 992px) {
.mobileLink{
display: inline-block;
}
.desktopLink{
display: none;
}
}

Answer 2

A flexible solution would be to use Javascript with a specific data- attribute for storing the different anchor names.
HTML:
<a class="targetLink" href="/link1" data-anchor="anchor-name1">Target link</a>
<a class="targetLink" href="/link2" data-anchor="anchor-name2">Target link</a>
To execute the code cross-browser on DOM ready and window resize, jQuery would be useful.
Check CodePen here
$(document).ready(function() {
var $target = $(".targetLink");
var $window = $(window);
var breakpoint = 640;
var linkSmall = false;
function checkWidth() {
if ($window.width() <= breakpoint) {
// appends anchors to links
if(!linkSmall){
$target.each(function(index) {
var href2 = $(this).attr("href") + "#" + $(this).attr("data-anchor");
$(this).attr("href", href2 );
});
linkSmall = true;
}
}else{
// removes anchors to links
if(linkSmall){
$target.each(function(index) {
var href1 = $(this).attr("href");
var a = href1.indexOf('#');
var href2 = href1.substring(0, a != -1 ? a : href1.length);
$(this).attr("href", href2 );
});
linkSmall = false;
}
}
}
checkWidth(); // on document ready
$(window).resize(checkWidth); // on window resize
});

Answer 3

As you don't want to repeat anchor elements(as per the other threads), you won't be able to do it with css so you'll have to use js.
if(window.innerwidth < 911){
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_small_screen_devices);
}else{
document.getElementsByClassName("class")[0].setAttribute("href", "url_for_normal_desktop_and_bigger_devices");
}
you can use a loop to repeat the same process for all anchors with using proper selectors.