Page not reaching the very top when scrolled

Having a puzzling issue that's got me stumped. Currently working on my professor's website at jurgec.net.

The problem is specific to the mobile version of the site. Whenever clicking on a link like "I am an undergraduate student," scrolling down a bit, and then hitting the back button, the page doesn't fully return to the top. Instead, you can still see some of the yellow background below.

I suspect it has to do with each section's height being dependent on the screen size of the browser. On mobile Chrome, as you scroll down the URL bar disappears, causing the browser's height to change and messing up the proportions of the sections on the website.

If anyone could offer assistance, it would be greatly appreciated!

javascripthtmlcss

Answer №1

The reason behind this behavior is that the back button brings you back to the previous "state" of the website you were on, which includes your scroll position. So if you scrolled down before clicking and then go back, it will take you back to that exact spot.

Do $(document).ready() functions execute after using the back button? While I'm not fully certain, you can try something like this:

$(document).ready(function(){
  scroll(0,0) 
});

If this solution works, you shouldn't notice any jumping because you are already at the top left corner (0,0) when the page loads initially. Give it a shot and see if it helps!

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

The lifecycle of XMLHTTPRequest objects in JavaScript - from creation to destruction

After years of working with traditional compiled object-oriented languages like C++ and .NET programming, I decided to dip my toes into JavaScript for a new project. As I was experimenting with AJAX, I stumbled upon a perplexing aspect related to how objec ...

javascripthtmlajaxxmlhttprequest

Why is it not functioning when storing responses in a jQuery variable?

I am working on a survey where each question is displayed one at a time. Users click on their answers, causing the current question to fade out and the next one to fade in. At the end of the survey, I want to show all the answers they selected. Below is t ...

javascriptjqueryhtml

Exploring the world of colored tab links in CSS

Check out this code: <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>My Unique Page</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.3/themes/base/jquery-ui.css" /> ...

jquerycsstabsuicolortextcolor

Adding and Removing Attributes from Elements in AngularJS: A Step-by-Step Guide

<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...

javascripthtmlangularjs

Utilize Laravel to trigger a route action based on a dropdown selection change, generating a unique URL

In my code, I have a dropdown select containing the list of the next 12 months: <select name="month" id="specificMonth"> @foreach(Carbon\CarbonPeriod::create(now()->startOfMonth(), '1 month', now()->addMon ...

javascriptphpajaxlaravel

Tips for launching different web browsers via hyperlinks?

My app has a link that I want mobile users from apps like LinkedIn to open in a browser such as Safari. I attempted this: <a href="safari-https://meed.audiencevideo.com">May open on Safari</a>' However, when I click the link, it opens i ...

javascripthtmllinkedin-api

What methods can I use to verify that the form data has been effectively stored in the database?

Here's the code snippet I've been working on: <?php // Establishing connection to the database require("database.php"); try{ // Prepare and bind parameters $stmt = $conn->prepare("INSERT INTO clients (phonenumber, firstname) VALUES (:ph ...

phphtmlmysqlpdo

What methods can be used to disable a JavaScript function, such as utilizing hasClass()?

I am currently customizing a WordPress theme to load posts and pages using AJAX. I have successfully implemented this functionality with the code snippet below, but now I need to prevent the AJAX function from running when clicking on the logo that links t ...

javascriptajaxwordpress

Webpack Error: SyntaxError - an unexpected token found =>

After transferring my project to a new machine, I encountered an error when running webpack --watch: C:\Users\joe_coolish\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js:186 outputOption ...

javascriptnpmwebpack

ThreeJs is known for effortlessly handling an abundance of vertices, far surpassing the number typically found

I came across this code snippet: function loadObject(filePath){ var loader = new THREE.OBJLoader(); loader.load( filePath, function ( object ) { child = object.children[0]; var geometry = new THREE.Geometry().fromBufferGeometry( ch ...

javascriptthree.js

NodeJS and Express server is having trouble accessing the linked JavaScript file(s) from the HTML document

I'm facing a challenge with my web hosting server on AWS while using express.js. I have encountered the following error: root@ip(censored):/home/ubuntu/(censored)# /home/ubuntu/(censored)/routes/index.js:15 $(document).ready(function() { ^ Referen ...

javascriptjquerynode.jsexpress

Adjust the text appearance of the graph in ApexCharts

Is there a way to adjust the font size of the donut chart generated by using apexchart? You can view the image here. <template> <section> <v-card raised> <v-card-title class="blue--text">Requests Overview</v-card-ti ...

javascriptvue.jsvuejs2apexcharts

Issues with data binding in Angular2 are arising specifically in IE11

After successfully loading the application on Chrome, Firefox, and Edge, I encountered difficulties when trying to load it on IE11. The data bindings were not created properly, despite the internal data being fetched correctly through a websocket connectio ...

javascriptangularcross-browserinternet-explorer-11

What causes TypeScript to generate an error when using two array of object types, but not when using the shape of both?

There are two basic types of data available: type DataA = { percent: string; exchange: string; }; type DataB = { price: number; exchange: string; }; I'm puzzled as to why TypeScript gives errors when I try to use both types together: const ...

javascriptarraystypescriptjavascript-objects

JavaScript or HTML can be used to store external embed PDF files in a cache

I have a PDF file from an external source embedded on this page. Although it displays correctly, I am concerned about the file being downloaded each time the page is visited. Would using an object tag instead help to cache the PDF and prevent repeated do ...

javascripthtmlobjectpdfembed

JavaScript: Automatically retrieving the if else function

I need help automating the calculation of the number of days a person worked based on their "in-time" and "out-time". I've tried to implement this in my JS code, but it's not working as expected. HTML <fieldset> In-Time: <input clas ...

javascriptphphtml

Scrollbar visibility issue

Recently, I came across a curious behavior regarding browser scrollbars. To see it in action, check out this link. HTML: <div class='container'> <div class='fix' /> </div> CSS: body { margin: 0; } .container ...

htmlcssscrollbar

Trouble arises when implementing personalized buttons on the Slick JS slider

Are you struggling to customize buttons for your Slick Slider JS? I am facing a similar issue with applying my own button styles to the slider. I am interested in using arrow icons instead of the default buttons. Here is the HTML code snippet: <secti ...

javascriptjqueryhtmlcss

It appears that the functionality of RegExp.prototype.exec() is not functioning as expected

const fs = require('fs') const jsdocFinder = /\/\*\*\n(.+?)\*\//gs /** * Implementing a function to convert JSDocs into JSON format. * @function * @param {String[] | String} dirs The directory or directories of ...

javascriptnode.jsregex

Implement a loader in AngularJS to display when transitioning between pages

Is there a way to implement a loader that appears when the page starts changing and only disappears once the entire page is fully rendered to prevent clipping bugs? I have already set up the loader as shown below: $scope.$on('$routeChangeStart' ...

javascriptangularjsloading