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

Tips for adjusting the size of your Navigation bar

I've noticed that most of the questions I've come across are related to WordPress or Bootstrap nav bars, which I'm not familiar with. I've created mine using CSS. I want to enhance my navigation bar for mobile users by making the butto ...

The Jquery script seems to be malfunctioning on one specific page while working perfectly fine on

I received a jQuery script from a foreign web page that I'm trying to implement on my own site. $(function () { var $txt = $('input[id$=TextBoxFiltroProv]'); var $ddl = $('select[id$=DropDownListProv]'); var $items = $ ...

Implementing a backdrop while content is floating

I am facing an issue with a div that has 2 columns. The height of the left column is dynamically changing, whereas the right column always remains fixed in height. To achieve this, I have used the float property for both column divs within the container di ...

Unable to retrieve push token for the device. Please verify the validity of your FCM configuration

Looking for a solution to the issue of obtaining a push token Error: Unable to retrieve push token for device. Ensure that your FCM configuration is correct I have integrated Expo permissions and notifications in my React Native app, but nothing seems to ...

Converting from Async.js parallel to Bluebird: A Step-by-Step Guide

Utilizing async.js allows me to define promises with handlers, providing polymorphism and separating results. Can this be achieved in bluebird as well? async.parallel({ cityPromises: (cb)=>{ City.find({ ...

Utilizing ASCX to trigger JavaScript functions within an ASPX page

I created a user control named MyListSelect.ascx that contains a list of radio buttons... <%@ Control Language="C#" %> <select> <option disabled selected>Select Options</option> <option> option 1 </opti ...

Establishing a preset date in the Eonasdan Bootstrap datepicker

I implement the Calendar functionality using a library available at this link Below is the HTML code snippet: <div class="form-group" id="div_mydatecontainer"> <div class='input-group date' id='datetimepicker ...

Using AJAX to communicate with a MySQL database and create a countdown timer using JavaScript

I have been trying to display data from a database using Ajax and incorporate countdown timers with times also fetched from the same database. It has been a struggle for me for almost 24 hours now. You can check out the main code here where you will notic ...

Adding Angular Components Dynamically to HTML Using a String, and Initializing with Bootstrap Framework

I am interested in achieving the following: Here is a snippet of code that I have: <body ng-app="MyApp"> <div id="content"><button onclick="addCode()">Add Code</button></div> </body> The function "addCode()" does this ...

Steps to create a toggle click event

I've been attempting to create a toggle click event using the code below: HTML <a class="load" data-gallery="123456" style="cursor: pointer;"><h2><p>example</p></h2></a> <div id="123456"> </div> j ...

How to implement datepicker on multiple input fields

Below are the two input fields that have datepicker functionality: <div class="row"> <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22&apos ...

Change the blue line to a crisp, clean white

Is it possible to customize the color of the blue line that appears when clicked? class Greetings extends React.Component { render() { return <div>Greetings {this.props.name}</div>; } } ReactDOM.render( <div> <p tabInde ...

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

Sorting nested table rows in vueJS is an essential feature to enhance

I am working with a json object list (carriers) that looks like this: https://i.stack.imgur.com/0FAKw.png Within my *.vue file, I am rendering this using the following code: <tr v-for="carrier in this.carriers"> <td>{{ carrier.id ...

How can I use Angular to dynamically open a video that corresponds to a clicked image?

I need assistance with a functionality where clicking on an image opens a corresponding video on the next page. The issue is that all images have the same ID, making it difficult to link each image to its respective video. Below is the data I am working ...

Exploring the functionality differences between mouse wheel tilt and scroll in JavaScript with scrollTop

Did you know that some computer mice come equipped with a scroll wheel that can tilt both left and right? This feature allows users to navigate through Google's piano roll app, which can be accessed here (source code available here). I am working to ...

What is the best way to incorporate JavaScript code as React syntax?

For my project, I am using the OpenLayers API Map. I'm unsure of the correct way to incorporate JavaScript code in React or vice versa. Here is an answer on how to use markers in the map, but I am struggling to implement it in my current code since I ...

Issue encountered while transferring data using Ajax

I am a novice in the realm of ajax and currently immersed in a project that demands passing data from an ajax function to a php page for the purpose of dynamically generating and displaying modals. Although I am successful in creating the modal, I suspect ...

Creating a Set of Buttons in HTML

Need some assistance with grouped buttons. Let's consider a scenario where there are 5 buttons on an HTML page. When the 3rd button is clicked, buttons from 0 to 3 should change color and the function should return 3. Similarly, when the 5th button is ...

Tips on obtaining the screen resolution and storing it in a PHP variable

Hey there! I've run into a bit of a roadblock that I'm struggling to overcome. I know that I need to incorporate some JavaScript to solve this issue, but I'm having trouble grasping how to do so. Here's the script I'm working with: ...