Let's discuss how to include the scrollTop option

I am new to coding and I need help adding a scrollTop margin of +100px to my code. The page already has some top margin but I can't seem to locate it. I'm also having trouble finding where the margin-top is being set in the JavaScript file.

/*************
* = Parallax *
*************/
jQuery(document).ready(function ($) {
    //Cache some variables
    var links = $('.nav').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');

    //Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
    //easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught the plugin.
    function goToByScroll(dataslide) {
        var offset_top = ( dataslide == 1 ) ? '0px' : $('.slide[data-slide="' + dataslide + '"]').offset().top;

        htmlbody.stop(false, false).animate({
            scrollTop: offset_top
        }, 1500, 'easeInOutQuart');


    }

    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
        $(".nav-collapse").collapse('hide');
    });

    //When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the goToByScroll function
    $('.navigation-slide').click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
        $(".nav-collapse").collapse('hide');
    });
});

Answer №1

Here's a snippet you can include in your click event function for the "back to top" button or link:

$("html, body").animate({ scrollTop: 0 }, "slow");

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

What is the method to make a CSS selector avoid selecting a specific element?

Let's say I have a CSS style that looks like this: input.validation-passed {border: 1px solid #00CC00; color : #000;} The JavaScript validation framework I am using injects every input tag with a class="validation-passed". While this works fine ...

Tips for updating the filename in a file input using AngularJS

Is it possible to dynamically change the name of a chosen file? For instance, if I select a file with the name "img1", can it be automatically changed to a different dynamic name upon selection? <input type="file" fd-input/> ...

Encountering difficulties when attempting to run initial React Native app

Struggling with my journey of learning react-native, I encountered a roadblock while trying to run the application. Here is the error log. I'm hopeful for some assistance from anyone who can lend a hand. The development server returned response erro ...

The dropdown menu vanishes from sight as soon as the cursor moves away from a link

Recently, I encountered an issue while trying to create a dropdown menu using Jquery. The problem arose when attempting to select the second link, as the entire menu would disappear. Additionally, is there a way to ensure that only one dropdown menu is vis ...

Implementing the array name property in a JSON object using ES5

I am currently working with a JSON object that has the following structure: {"Firstname":"john","Lastname":"doe"} My goal is to transform it into an array with a specific name 'abc': users: [{"Firstna ...

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

Issue: The element '[object Object]' is of type 'object', which is not supported by NgFor. NgFor only works with Iterables like Arrays. - Problem encountered in an Ionic Project

I'm currently working on retrieving my user's username from Firebase Firestore Database using Ionic and AngularFire. I have implemented the valueChanges() method to obtain the observable and am trying to process it using an async pipe. However, u ...

Absolute positioned TD creates a gap upon being displayed

Hey there, I am facing an issue with a table I have. In each row (TR), the last TD element has a class called 'abs'. The style for this class is specified in the provided code snippet. Initially, this element is hidden. However, when you hover o ...

svg viewbox cannot be adjusted in size

Struggling with resizing an SVG to 20px by 20px. The original code size of the SVG is quite large at 0 0 35.41 35.61: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SVG</title> ...

The absence of a flickering flame is noticeable in the THREE.js environment

I have been working on creating a flame using THREE.js and spark.js. However, even after rendering the world, I am unable to see the flame and it seems like the world is empty. Although I checked the console for errors, there are no indications of what mig ...

What is the process for sending a post request with a JSON payload to an external API using Node.js?

I am currently facing an issue while attempting to send a POST request with a JSON payload to an external API using node.js. Below is the code I am using: var express = require('express'); var bodyParser = require('body-parser'); var ...

Breaking down a statement into individual elements within an array, incorporating keys alongside the elements within the array

let condition = "[AccNum]==true&&[AccNum]==[ARID]&&[AccNum]==aaaa || [ARID]!=true&&[DOB]&gt;[ARID] || [DOB]&gt;bbb&&[DOS]&gt;=[ARID]&&[DOS]&lt;[Gender]&&[66642]&lt;=cccc&&[66642] I ...

Using AngularJS to integrate a function within a component

Hey there, I am facing an issue trying to call a function that is in a component. Let me share the code snippet from my component buttonsController: (function(){ "use strict"; angular .module('my') .component('myButton&ap ...

Loading an HTML page using jQuery's .load() method that contains embedded JavaScript

I'm facing an issue with loading .html pages (including JavaScript) into a div element. Below is my div setup: <div class="content"></div> This is my php code: <?php if(!$_POST['page']) die("0"); $page = (int)$_POST[&a ...

Struggling to dynamically create an identifier and data-bs-target, but experiencing difficulty in doing so

<ul> <li data-info="Amount in (₹)">{{depositeAmt}}</li> <li data-info="Status"> <button class="statusbtn Process" data-bs-toggle="collapse" data-bs-target="#colla ...

Utilizing JavaScript to dynamically set a CSS file from an API in AngularJS

I am currently facing an issue with integrating a CSS file returned by an API into my entire website. Since the URL of the CSS file keeps changing, hard coding the URL is not feasible. While I have successfully implemented this on 'view1', my goa ...

The error code 405 (Method Not Allowed) occurs in Ajax when the action field is empty or identical to the current page

Special thanks to @abc123 for sharing the code below in one of their posts: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <form id="formoid" a ...

The true essence of Angular values only comes to light once the view has been updated

Here is the HTML code I am working with : <div class="container-fluid"> <div class="jumbotron" id="welcomehead"> <br><br><br><br><br><br><br><br><br><br> ...

Protecting a javascript string in php: A comprehensive guide

Having trouble with my PHP javascript string. Attempted to add a string to a variable within a switch statement but encountered an error: $blocPub = '<script type="text/javascript"> var rdads=new String(Math.random()).substring (2, 11 ...

Bottom-aligned footer that remains in place instead of sticking to the page

I am attempting to position a footer at the bottom of the page, without it being sticky. Instead, I want it to remain at the bottom in case the user scrolls down there. Although it technically "works," there appears to be some white space below the footer ...