Switching downlink to top link when scrolling downwards

I have a downward scrolling link on my homepage that moves the page down when clicked by the user. However, I am struggling to make it change to a "back to top" link as soon as the user scrolls 10 pixels from the top. Additionally, I am having trouble with the smooth scroll jQuery function. Can anyone help me identify where I am going wrong?

HEAD

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="JQuery/jquery.js"></script>
<script type="text/javascript" src="JQuery/html5lightbox.js"></script>
<script type="text/javascript" src="JQuery/counter.js"></script>
<script type="text/javascript" src="JQuery/smoothscroll.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="JQuery/script.js"></script>

HTML 

<div class="down-link"><a href="#about" id="w-downlink" class="smoothscroll"><i class="ss-navigatedown"></i></a></div>

CSS

.down-link {
    width:100%;
    height:50px;    
}

#w-downlink i {
    line-height: 42px;
    font-size: 24px;
    color: #fff;
    display: block;
    width: 24px;
    margin: 0 auto;
    margin-top:10px;
}

#w-downlink {
    height: 60px;
    width: 60px;
    background-color: #191919;
    background-color: rgba(20, 20, 20, 0.4);
    position:absolute;
    bottom:0;
    margin-bottom:30px;
    right:0;
    margin-right:20px;
    cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 1;
}

.w-downlink:hover {
    height: 60px;
    width: 60px;
    background-color: #191919;
    background-color: rgba(20, 20, 20, 0.4);
    position:absolute;
    bottom:0;
    margin-bottom:30px;
    right:0;
    margin-right:20px;
     cursor: pointer;
    -webkit-transform: translate3d(0, 0, 0);
    opacity: 0.5;
}

jQuery used is for the smooth scroll plugin.

 $('.w-downlinkn').click(function() {
    $('html, body').animate({ scroll: 250 });
});

Thank you in advance for any assistance provided.

javascriptjqueryhtmlcssscroll

Answer №1

When addressing the issue of smooth scrolling:

The key is to utilize "scrollTop" rather than "scroll":

$("html, body").animate({ scrollTop: "300px" });

Refer to: Is it possible to animate scrollTop with jQuery?

To modify the scroll link:

$(window).scroll(function() {
  var scrollDownLink = $('#w-downlink');
  if ($(window).scrollTop() < 10) {
    scrollDownLink.attr('href', '#about');
    scrollDownLink.find('i').removeClass('ss-navigateup').addClass('ss-navigatedown');
  } else {
    scrollDownLink.attr('href', '#top-anchor');
    scrollDownLink.find('i').removeClass('ss-navigatedown').addClass('ss-navigateup');
  }
}

In order to accomplish this, you must include an empty anchor as the initial element in the body:

<body>
    <a id="top-anchor"></a>
    ...
</body>

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

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

javascriptcssangularjsdom

Clicking the button will cause the React component to close itself automatically

Is there a way to make a React component self-close when a button within the component is clicked? Take a look at this code snippet: import React from 'react'; import PropTypes from 'prop-types'; const MyReactComponent = (props) => ...

javascriptreactjs

Is there a way to automatically scroll to the bottom of a div when it first

Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages. Utilizing VueJs: <template> <div id="app"> <div class="comments" ...

csstypescriptvue.jsscroll

Utilizing the JavaScript Array.find() method to ensure accurate arithmetic calculations within an array of objects

I have a simple commission calculation method that I need help with. I am trying to use the Array.find method to return the calculated result from the percents array. The issue arises when I input a price of 30, as it calculates based on the previous objec ...

javascripttypescript

Steps for aligning floating DIVs in the center of a parent DIV

Why is the text alignment not working as expected when I have three divs within a parent div that need to be center aligned? If you'd like to see the issue in action, check out this Demo fiddle <div class="container_alt"> <div class= ...

htmlcss

Choose a submenu

Currently utilizing the selectable feature for creating a choice list. <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3-1</li> <li>item 3-2 ...

jquerymenu

The React syntax is malfunctioning

componentDidMount() { const restaurants = Restaurant.all() restaurants.then( rests => { this.setState({ restaurants: rests }) }) } render() { const { restauran ...

javascriptnode.jsreactjssyntax

Tips for resolving the issue of "Text stays in original position while image changes in the background when hovering over the text."

I'm currently working on a website and I have a question regarding how to make text stay in position while hovering over it (inside a span), and at the same time, display an image in the background that allows the text to overlay it. HTML: <ht ...

htmlcssimagebackgroundhover

Create a full-screen layout with a Bootstrap 5 column grid and a sleek navbar

Can you help me modify this design using Bootstrap rules while keeping the original CSS files intact? I need to make these 5 cards (columns) full width with a navbar. Issue 1: I always see a vertical scroll bar on desktop. Issue 2: The Navbar doesn' ...

csstwitter-bootstrapresponsive-designbootstrap-5fullscreen

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss

Ways to verify the presence of an element in a list

I found this interesting JS code snippet: ;(function ($) { $('.filter-opts .opt').click(function(){ var selectedName = $(this).html(); $('.append').append('<li>' + selectedName + '</li> ...

javascriptjqueryhtmlcss

Tracking triggered JavaScript events (across all browsers)

Although this query may have been addressed previously, the responses mostly pertain to browser-specific techniques. My inquiry is straightforward: Is there a method to observe all triggered events (specifically the fired event and the corresponding elemen ...

javascript

Execute a function (with arguments) within a v-for loop in Vue.js

Currently, I am attempting to create a select element using Vue.js and Material Design that has 2 levels: categories and items. Each category can contain multiple items which may be selected or not. <md-select v-if="categories.length > 0" name="cate ...

javascriptvue.js

Merge the values of an object's key with commas

I'm dealing with an array of objects that looks like this: let modifiers = [ {name: "House Fries", price: "2.00"}, {name: "Baked Potato", price: "2.50"}, {name: "Grits", price: "1.50"}, {name: "Nothing on Side", price: "0.00"} ] My goal is to con ...

javascriptarraystypescriptobjectconcatenation

What is the best method for storing a Google Analytics object in a $_SESSION variable when transitioning between PHP scripts to avoid encountering a non-object error

Currently in the process of developing a web application that integrates with the Google Analytics API, however encountering challenges when it comes to implementation. The user is given the option to choose their profile from three interconnected drop-do ...

javascriptphpjqueryajaxgoogle-analytics-api

Encountering a Navigation Problem with Fullpage.js

Check out this example on CodePen In this scenario, when setting the following values in fullpage: bigSectionsDestination: ".section", normalScrollElements: '.section', new fullpage('#fullpage', { sectionsColor: ['yellow& ...

jqueryscrollfullpage.js

React - How to properly pass a reference to a React portal

I have a Card component that needs to trigger a Modal component. Additionally, there is a versatile Overlay component used to display content above the application. Displayed here is the App component: class App extends Component { /* Some Code */ ...

javascriptreactjsreduxportal-system

Styling a Fixed Header in CSS/HTML - Scroll Effect

Is it possible to hide only the upper part of the nav-bar, similar to the behavior in WhatsApp? I am using material-ui for this particular use-case. Currently, my implementation causes the app-bar to extend only when the scroll position is less than 48px, ...

cssreactjsmaterial-ui

What is the best way to retrieve the name/value pairs from a JSON object

function (data) { //add values based on activity type //data = JSON.parse(data); //alert(abc.Phone1); alert(data.myName) alert(data.toString()); if (activityType == "Phone") { } return; }, By observing the callback funct ...

jqueryajaxjsonasp.net-mvc-3

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

javascriptjquerypromise