The functionality of the anchor tag is restricted in both Chrome and Safari browsers

I'm having an issue with HTML anchor tags not working properly in Chrome and Safari. Instead of scrolling up, the page scrolls down when clicked. Here is the HTML code I'm using:

<a id="to-top"></a>
<a class="button toTop" href="#" onclick="document.getElementById('to-top').scrollIntoView(true);return false;">Вверх</a>

And here is the JavaScript code:

var topScreen = window.pageYOffset ? window.pageYOffset : document.body.scrollTop;
        var myScreen = screen.availHeight;
        if(topScreen > (myScreen / 3)) {
            $(".toTop").fadeTo(0, 1.0);
        }
        else {
            $(".toTop").fadeTo(0, 0);

Also, here is the SCSS code:

.toTop {
        display: none;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 999999;
        transition: opacity 1s ease-out;
        outline: none;
        &:hover {
            transition-delay:0s;
        }
        a {
            color: #fff;
            text-decoration: none;
            &:hover {
                color: #000;
            }
        }
    }

Something seems to be wrong. Additionally, the element remains focused after being clicked.

Answer №1

Without a JSFiddle to reference, it's challenging for us to pinpoint the exact issue in your project and determine what outcome you are aiming for. However, I have created a simple fiddle that should resolve the problem.

HTML

<div id="to-top"></div>
<a class="button toTop" href="#to-top">Back to Top</a>

CSS

#to-top {
    height: 200vh;
}

Your current challenge may stem from attempting to navigate to another <a> tag, as anchor links typically work with div elements that have an id. Please test out the provided fiddle and consider changing the element from to-top to a div to see if that resolves the issue.

In future inquiries, remember to include a JSFiddle link to provide more clarity on the problem at hand.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can one validate a single route parameter on its own?

Imagine a scenario where the route is structured as follows: companies/{companyId}/departments/{departmentId}/employees How can we validate each of the resource ids (companyId, departmentId) separately? I attempted the following approach, but unfortunate ...

Selenium Timeout Error: Locator Not Found

Once again, I am struggling with the locator and trying to figure out the correct syntax and code. Here is the code I was attempting to execute: wait.until(EC.presence_of_element_located((By.XPATH, "//div[@class='col-xs-6']//input[@class=&a ...

Preserving Search and Filter Settings in jQuery Data Tables

I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...

The Angular7 counterpart of the C# attribute decorator

I'm working with an API method that has an Authorize attribute to verify permissions. [Authorize(ReadIndexes)] public async Task<IActionResult> GetIndexes () { ... } Is there a similar way in Angular to implement permission checks so the API ...

Selected value is not displayed in the textbox when using autocomplete feature

---Ajax---- An issue has arisen with the autocomplete feature. While typing "wi" (for example, wipro), the drop-down list appears as expected. However, if only "wi" is selected in the text box, $(document).ready(function () { $("#company_name").key ...

Inserting data into a table using variables in Mssql database management system

I'm really struggling to find a way to safely add my Variables into an MSSQL server. I've tried everything. Could someone please help me and provide the solution for adding my Variables into the Database? It is crucial that I prevent any possib ...

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

Steps to incorporate a personalized design onto a card element within Material UI

As a JavaScript developer, I was tasked by my brother to create a simple webpage for his business. Admittedly, frontend design is not my strongest suit so I decided to utilize Material UI and added some CSS to paste everything together. Right now, I am wo ...

Could images be positioned in this manner without using the float property?

Looking to arrange images in a left-to-right flow while keeping them centered on the screen: https://i.stack.imgur.com/WHBv9.png However, I'm struggling to achieve this as the last image always ends up centered horizontally as shown below: https://i ...

Angular 9 - Auto-adjust the height of the text box as the user types, returning to its original size when no longer in focus

I need a solution where an input field's height adjusts to display the user's entry, then returns to normal size when they click away. It should function similar to this example image: https://i.stack.imgur.com/yKcik.png Once the user enters th ...

Combine two arrays in MongoDB where neither element is null

Issue I am looking to generate two arrays of equal length without any null elements. Solution I have managed to create two arrays, but they contain some null values. When I remove the null values, the arrays are no longer of equal length. aggregate([ ...

Is there a way to customize the appearance of a MUI5 Tooltip using emotion?

I went through the information in this Stack Overflow post and experimented with the styled method. The code snippet I used is as follows: import * as React from 'react'; import { styled } from '@mui/material/styles'; import Tooltip, { ...

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

The search functionality in an Html table is currently malfunctioning

Currently, I am working on developing a search mechanism in HTML. It seems to be functioning properly when searching for data for the first time. However, subsequent searches do not yield the expected results. Additionally, when trying to search with empty ...

Error encountered with structured array of objects in React Typescript

What is the reason for typescript warning me about this specific line of code? <TimeSlots hours={[{ dayIndex: 1, day: 'monday', }]}/> Can you please explain how I can define a type in JSX? ...

TypeScript is throwing an error because a value has been declared but never actually used in the

private tree_widget: ITreeWidget; private $ghost: JQuery | null; private drag_element: DragElement | null; private previous_ghost: IDropHint | null; private open_folder_timer: number | null; constructor(tree_widget: ITreeWidget) { this.tree_widget = t ...

Issues with jQuery functionality arise when attempting to delete items in Michael Hartl's tutorial, specifically in chapter 11

Currently, I am following the Rails tutorial by Michael Hartl, like many other newcomers to Rails. However, I have hit a roadblock in Chapter 11, specifically with an issue involving JQuery not working properly with the delete action. Whenever I click on a ...

Customize RequireJS dependencies for flexible dependency injection

Currently, I am faced with integrating a component that would greatly benefit from Dependency Injection (DI) into an existing framework where DI was not considered during its initial design. The configuration defining dependencies is sourced from a backend ...

Steps to activate a single button within a deactivated fieldset

Is there a way to deactivate all elements within a Fieldset, while keeping certain buttons active? Check out this demo. <fieldset ng-disabled="true"> <legend>Personalia:</legend> Name: <input type="text"><br> Em ...

Having additional space preceding list elements within a flexbox setup

Check out the code snippet below: HTML Code <ul class="menu"> <li><a href="#">Item 1</a></li> <li> <a href="#">Item 2</a> </li> <li> <a href="#">Item 3</a> </li& ...