What is the method to convert Javascript values from pixels to percentages?

Is it possible to change the scrolltop value dynamically based on a percentage of the user's screen size? I've been trying to achieve this using JS but haven't had any luck. Here is a link to a codepen that showcases the issue:

[link] (http://codepen.io/ericshio/pen/zBRbAY)

Here is the HTML:

<div class="filler"></div>
<a href="#introjump"><img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht"/></a>

This is the CSS used:

.down-arrow {
    position: fixed;
    bottom: 1%;
    left: 50%;
    max-width: 3.5%;
    min-width: 3.5%;
    width: 3.5%;
    box-shadow: none;
    opacity: 0.6;
}

.down-arrow:hover {
    opacity: 1;

}


.filler {
    height: 10000px;
}

And here is the JavaScript being applied:

$(window).scroll(function() {
  $(".down-arrow").css("opacity", 1 -
    $(window).scrollTop() / 50);
});
javascriptjqueryhtmlcsswordpress

Answer №1

Give this a shot.

When you scroll, the code below will adjust the opacity of the ".down-arrow".
$(window).scroll(function() {
  $(".down-arrow").css("opacity", 1 -
    $(window).scrollTop() / $(document).height()*0.5);
});

Answer №2

give this a shot

.up-arrow {
    position: fixed;
    top: 10%;
    right: 50%;
    max-width: 5%;
    min-width: 5%;
    width: 5%;
    box-shadow: none;
    opacity: 0.8;
}

.up-arrow:hover {
    opacity: 1;
}


.filler-div {
    height: 70%;
}

Answer №3

It appears that the intention is to gradually fade out the arrow as the user scrolls down

$(window).scroll(function() {
  $(".down-arrow").css("opacity", 1 - ($(window).scrollTop() / document.body.scrollHeight));
});
.down-arrow {
  position: fixed;
  bottom: 1%;
  left: 50%;
  max-width: 3.5%;
  min-width: 3.5%;
  width: 3.5%;
  box-shadow: none;
  opacity: 0.6;
}
.down-arrow:hover {
  opacity: 1;
}
.filler {
  height: 10000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filler"></div>
<a href="#introjump">
  <img class="down-arrow" src="http://www.themainconcept.com/wp-content/uploads/2015/11/down-arrow-wht.png" alt="down arrow wht" />
</a>

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

Issue with Angular: Unable to properly sort data while modifying queryParams

Within the component.ts file: export class TabsComponent implements OnInit { constructor( private store$: Store<UsersState>, private router: ActivatedRoute ) {} ngOnInit(): void { this.onFilterByIncome(); this.router.queryParam ...

javascripttypescript

Having trouble with res.redirect not working after the page has been rendered with data?

I have a basic forget password feature set up, where users can request a password change and receive an email with a token. Clicking the link in the email will redirect them to a page where they can input their new password. When I click on the email link ...

javascriptnode.jshttp-redirectexpressejs

Kendo UI Web - MultiSelect: choosing an option multiple times

Currently, I am encountering an issue with the Kendo UI MultiSelect widget when trying to select an option multiple times. An example of this is shown in the image below where I want to choose Schindler's List again after selecting The Dark Knight. Ho ...

javascriptjquerywebkendo-uikendo-multiselect

Converting to JSON can be done dynamically by adjusting the format based on the size of an array

Below is the flat array I have: let data = [ ["0000001", "PAUL", "Y", "PELUCHE", "DRAKE", "DOG"], ["0000002", "ECHEBEL", "Y", "CAT", ""], ...

javascriptnode.js

Error with object props in React using Typescript

Here's a scenario; I have a list of 'Reviews' that I am trying to render. The Proptype for these reviews is as follows: export interface Props { title: string; name: string; reviewdesc: string; rating: number; } In the pare ...

javascriptreactjstypescript

Leveraging tailwind for achieving dynamic height responsiveness

My Tailwind-built page currently has a table in the bottom left corner that is overflowing, and I would like it to adjust its size to fit the available space and scroll from there. I want it to fit snugly in the bottom left corner of the browser viewport ...

csstailwind-css

JavaScript: Adding up whole numbers--- Reference Error: Undefined

I'm having trouble with my code because it's saying that "t1" is not defined, even though it's the name of my text box. I tried making the variable global by declaring it outside the function, but it didn't solve the issue. Interestingl ...

javascriptreferenceerror

Hold off on moving forward until the content has been loaded using ajax within loops

I am facing an issue with waiting for ajax requests to complete before proceeding. My task involves iterating through all the options in five select lists. Upon selecting an option in "Select1", it dynamically loads or refreshes "Select2". The same proces ...

javascriptjqueryajax

Trouble arises with Javascript object destructuring when used with this.props in React

Just recently I discovered object destructuring with a basic object, which worked perfectly. However, when attempting to apply it in React on this.props, all my variables are returning as undefined. I'm unsure of what mistake I might be making here. A ...

javascriptreactjs

Having trouble parsing PHP JSON encoded data in JavaScript

When I make an AJAX call to a PHP script that returns a JSON encoded object, I encounter some issues. $.post("php/getCamera.php", { cam_id: identifier }, function(data){ console.log(data); //var camera = JSON.parse( ...

javascriptphpjqueryajaxjson

Tips for incorporating IntersectionObserver into an Angular mat-table to enable lazy loading功能？

I am looking to implement lazy loading of more data as the user scrolls down the table using IntersectionObserver. The container I am using is based on the Bootstrap grid system. However, despite using the code below, the callback function is not being tri ...

htmlangularangular-materialangular-material-table

Utilizing AJAX and javascript for extracting information from websites through screen scraping

Is it possible to scrape a screen using AJAX and JavaScript? I'm interested in scraping the following link: I tried the technique mentioned on w3schools.com, but encountered an "access denied" message. Can anyone help me understand why this error is ...

javascriptajax

Dimensions of Titles (H1, H2 etc)

I am looking to have a unique background color for my headers from h1 through h6. The width of this background should match the width of the text in the header, along with padding. Currently, the background width is matching the container instead of the te ...

cssheaderwidth

Exploring the impact of JavaScript tags on website performance in accordance with W3

While researching website optimization strategies today, I came across an article discussing the benefits of moving JavaScript scripts to the bottom of the HTML page. I am curious if this approach aligns with W3C's recommendations since traditionally ...

javascripthtmloptimizationtagsw3c

Discover the new features of Next.js 13: Learn how to efficiently extract parameters from URLs using userParams, and seamlessly pre-render components at build time

Currently, I am diving into the latest version of next.js 13.4 and have set up a page with the route /notes/[note]. To extract the note parameter from the URL, I am utilizing import { useParams } from 'next/navigation'. In addition to this, I wa ...

javascriptreactjsnext.jsnext.js13

The Main page is being graced by a floating Twitter Bootstrap video

When trying to display a video next to a paragraph, I encountered an issue where the paragraph was taking up 100% of the screen and the video was floating over it, obstructing part of the text. Despite setting the row and cols, the layout wasn't behav ...

htmltwitter-bootstrapvideogridprogram-entry-point

Determine if a class is odd or even in Angular by utilizing ng-click

Trying to alternate classes on elements in an ng-repeat loop based on whether they are even or odd... <div ng-click="displayHTML(content)" ng-class-odd="'title'" ng-class-even="'html'" ng-repeat="content in name.name"> {{cont ...

javascriptangularjs

Resources for Vue.js stylesheets

Vue.js is my latest discovery and I have been experimenting with the single file component architecture. A small issue I encountered was that all of my components' styles were being loaded on the page, even if they weren't currently active. Is t ...

javascriptcssvue.js

Experience the magic of a customized cursor that disappears with a simple mouse movement in your website,

I have been experimenting with designing a custom cursor for my website. After finding a design I liked, I made some adjustments to suit my needs. However, an issue I encountered is that when I scroll, the custom cursor also moves away from its original po ...

javascripthtmlcsscursor

The ajaxStart() and ajaxStop() methods are not being triggered

I'm currently working on a Q/A platform where users can click on specific questions to be redirected to a page dedicated for answers. However, when a user tries to answer a question by clicking the "Answer" link, certain background processes such as ...

javascriptjqueryajax