Is it important to maintain the scroll to top button at a consistent height?

I am facing an issue with my button. I want the button to remain at a consistent height even when the window size is adjusted vertically. How can I ensure that the button does not move or get pushed down as the height changes?

http://jsfiddle.net/ccq9cs9L/3/

HTML

<a href="#" class="scrollToTop hidden-phone">
    <span class="icon icon-arrow-up-white"></span>
</a>
<div class="myDiv">
    <div class="myContent">
        a lot of text
    </div>
</div>

CSS

a.scrollToTop {
    content: "";
    z-index: 1000;
    width: 60px;
    height: 45px;
    background: #78b209;
    position: fixed;
    top: 35.5%;
    right: 0;
    display: none;
}

JavaScript

$(document).scroll(function(e) { // This is scrollToTop button
    e.preventDefault();
    if ($(this).scrollTop() > 100) {
        $('.scrollToTop').fadeIn(); 
    } else {
        $('.scrollToTop').fadeOut(); 
    }
});
$('.scrollToTop').click(function () { // Scroll to top with ease
    $('html, body').animate({ scrollTop: 0 }, 1000, 'easeOutExpo');
    return false;
});
javascriptjqueryhtmlcssscroll

Answer №1

It appears that your inquiry pertains to CSS. You may want to consider adjusting the top: 35.5%; to a specific, fixed value like top: 100px;

If you wish for the pixel amount to be relative to the viewport height, you can achieve that using 

$(window).height();

To consistently display the button at a specified percentage from the top and maintain its position irrespective of viewport changes, you could implement this approach:

function positionButton() {
    var percFromTop = 35,
        newHeight = $(window).height() / 100 * percFromTop;
    $(".scrollToTop").css("top", newHeight+"px");
}

$(document).ready(function() {
    positionButton();
};

You can view it in action on JsFiddle here: http://jsfiddle.net/ccq9cs9L/9/

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

Incorporating a GLTF Model in a Basic React Three Fiber Environment

I am attempting to incorporate a model with diffuse and bump textures into a basic scene using react 3 fiber. Despite my best efforts, I can't seem to figure out what mistake I might be making. You can view the sandbox here: https://codesandbox.io/s ...

javascriptreactjsthree.jsgltfreact-three-fiber

Only keep the href and target attributes (if target is not empty) in all anchor tags while removing all other attributes

My task involves manipulating an HTML string by removing all attributes from anchor tags, except for href and target (if target has a valid value). $content = '<p style="abc" rel="blah blah"> Hello I am p </p> <a href="https://example. ...

phphtmlregexpreg-replace

Animate the transition effect as soon as the block is displayed

Looking to create a smooth page transition using CSS changes with the help of Javascript (jQuery). Initially, one of the pages is set to display none. page1 = $('.page1'); page2 = $('.page2'); page1.removeClass('animate').cs ...

javascriptjquerycssanimation

Show or hide the expand/collapse button based on the height of the container

Looking for a way to hide content in a Div if it's taller than 68px and display an expand option? The challenge lies in detecting the height of the responsive Div, especially since character count varies. I attempted using PHP to count characters bu ...

javascriptphpjqueryhtmlcss

Hold on for the completion of Angular's DOM update

I am facing an issue where I need to connect the bootstrap datepicker to an input field generated by AngularJS. The typical approach of using jQuery to attach the datepicker doesn't work as expected because the element is not yet available: $(functi ...

javascriptangularjsdomcallback

Error code 405: The POST method is not compatible with submitting multiple forms using JavaScript code simultaneously

Having multiple forms on a single page that are all submitted using the same JavaScript code presents some challenges. <form class="form" id="cancelchallenge1" method="POST" action="{{action('ChallengeController@cancelChallenge')}}"> <i ...

javascriptphpajaxlaravel

Is it possible to make an AJAX request even when the server file (such as PHP) is missing?

While working on the Sharetronix script, I encountered something unusual. In the console, I noticed that a network request was being sent to the following address: http://localhost/ajax/postform-submit/ajaxtp:xml/r:0 However, I couldn't locate any f ...

javascriptphpajaxhttp-redirect

Show the particular entry to be viewed upon clicking the link provided in the email

How can I create a link in an email that, when clicked, displays data for a single record? Currently, I have a datatable on the index page that shows all records when the app is opened. When a change is made to a record, an email is sent out with the ID o ...

c#htmlmodel-view-controller

I'm looking to use JQuery's .load function to transfer content from one URL to another

I am looking to dynamically load content from a div with the ID maininner on a specific URL within my website into another div with the ID yurt1_avail on a different URL also on the same site. I have conducted a successful test outside of the CMS using ...

phpjqueryiframecanvasjoomla

Flexible columns with dynamic maximum width based on percentage

After extensive research, I am turning to stackoverflow for help with a seemingly simple task that has proven difficult to achieve. I have three columns of expandable content and need them to adjust in size proportionally when one or more are expanded. Eac ...

htmlcssmultiple-columnscalculated-columns

The navigation menu on major browsers, such as Google Chrome, is malfunctioning and not responding as expected

Hope you're having a wonderful day! ☺️ I recently created a responsive navigation menu bar for mobile devices, but it seems to be malfunctioning on some major browsers like Google Chrome and Bing. Instead of displaying the mobile view, it shows t ...

javascripthtmlcssnavigationmenubar

Trying out basic form validation - Adjusting border color for an empty input

Currently, I am experimenting with a basic login form using PHP and testing it out on XAMPP in Chrome. Below is the code for the login form: <form action="login.php" method="POST"> <label>User: </label> <i ...

phpcssinputcolors

How to pass a null parameter with jquery's .ajax method

I am facing the following scenario function AddData(title, id) { $.ajax({ type: "POST", url: "topic.aspx/Add", data: JSON.stringify({ "title": title, "id" ...

jqueryajaxjson

Multiple occurrences of trigger events were detected when loading ajax content

In a div I have embedded a paragraph and a button as shown below: <div id="my_div"> <p>This is a paragraph</p> <button class="my_btn">Click here!</a> </div> The content within the div is dynamically loaded via ...

javascriptajaxeventsjquery

Ways to add a substantial quantity of HTML to the DOM without relying on AJAX or excessive strings

Currently, I am looking to update a div with a large amount of HTML content when a button on my webpage is clicked. The approach I am currently using involves the .html() method in JQuery, passing in this extensive string: '<div class="container-f ...

javascriptjqueryhtmlajax

What are the essential PhoneGap environment variables for leveraging AJAX data services in a development setting?

We are in the process of creating a PhoneGap application and are currently facing a challenge with our data service setup. Here's the code snippet we are working with: $.post(rooturl + '/data/something', { a: 1 }, (res) => {}); The prob ...

javascriptajaxnode.jscordovaphonegap-plugins

The button press does not seem to be functioning

I am facing an issue with a button located on a modal pop up window. The click event of the button does not seem to be firing. This button is placed within a gridview. Strangely, when I place the button outside the gridview it works perfectly, but inside ...

c#javascript.netasp.nethtml

Dividing a string into an array and displaying it in a table using Laravel

Retrieving a string from the database and using the explode function to split the values. Below is the code snippet: $data = DoctorRegistration::select('products') ->where('doctorid','=',$doctorid) ->get(); ...

javascripthtmlajaxlaravel

Encountering a value accessor error when attempting to test a simple form in Angular 4 and Ionic 3

My ionic form is quite simple: <ion-header> <ion-navbar> <ion-title>Foo</ion-title> </ion-navbar> </ion-header> <ion-content padding> <form [formGroup]="fooForm"> <ion-item> ...

javascriptangularionic2

The Wonders of Flex Box and Media Queries

Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...

htmlcssflexboxmedia-queries