Get the file by clicking the link and then automatically scroll down to the bottom div

When a user clicks on a link, I want them to be able to download a file (using the href attribute) and also automatically scroll down the page to a specific form.

Currently, my code only allows for one of these actions to happen at a time. I cannot seem to execute both functionalities simultaneously.

HTML

<a href="http://www.cdc.gov/animalimportation/images/dog2.jpg" download="dog2.jpg"
    class="scroll-to-bottom-link">Scroll to bottom</a>
<p>here is some secondary information</p>

jQuery 

$('.scroll-to-bottom-link').click(function(){
$('html, body').animate({scrollTop : $('body').height() }, 800);
return false;
});

Does anyone have suggestions on how I can achieve this? Some options I've seen involve using href="#", but that conflicts with the download functionality.

javascriptjqueryhtmlcssbutton

Answer №1

To make this work, I suggest nesting a div within the a tag and binding the event to it.

   <a href="http://www.cdc.gov/animalimportation/images/dog2.jpg" download ><div class="scroll-to-bottom-link">Scroll to bottom</div></a>
    <p>Here is some additional information</p>

Also, don't forget to eliminate the false true from the function.

$('.scroll-to-bottom-link').click(function(){
    $('html, body').animate({scrollTop : $('body').height() }, 800);
});

Visit JSFiddle for more details

Answer №2

To ensure proper functionality without hindering download capabilities, it's advisable to eliminate the return false statement as it triggers a preventDefault() which can block downloads.

Simply use the following code instead:

$('.scroll-to-bottom-link').click(function(){
   $('html, body').animate({scrollTop : $('body').height() }, 800);
});

VIEW DEMO

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 abort() function in Chrome can trigger an Undefined Error

When dealing with race conditions, I implement the following code to throttle get requests: if (currentAjaxRequest !== null) { currentAjaxRequest.abort(); } var query_string = getQuery(); currentAjaxRequest = ...

javascriptjqueryajaxxmlhttprequestabort

JSON and autocomplete feature causing performance problems

Developing an application that functions both online and offline using technologies like application cache and local storage is my current project. Utilizing jQuery mobile along with a jqm autocomplete solution from , I aim to create a seamless user experi ...

javascriptjqueryjsonperformancejquery-autocomplete

The <Span> element appears as bold in Internet Explorer when placed inside a table, whereas it appears as regular text in Google

I've successfully coded 5 dabbles, utilizing divs for precise positioning. Upon inspection in Chrome and IE, I noticed that the text appears bold in IE, unlike Chrome where it looks normal. To address this difference, I incorporated the <span> a ...

htmlgoogle-chromeinternet-explorerhtml-table

When working with props.data in MDBNav, learn how to set the active TAB or LINK

Utilizing ReactJS, I am incorporating MDBNav from MDBreact. https://i.sstatic.net/IQtEe.png This snippet demonstrates the container where props.data is defined: import React from 'react' import MiTabs from "../componentes/MiTabs"; class VpnLi ...

javascriptreactjsmdbootstrapmdbreact

Most effective approach to managing state in a React UI Component

I recently delved into the world of React. I've been using it to build a design system library for my work, which consists of standalone UI components tailored for use in React applications. I've developed a specific approach to managing the sta ...

cssreactjs

Issue with running gulp ser on first attempt in SPFX

Every time I try running gulp serve, I encounter the following issue: Error: Unable to locate module '@rushstack/module-minifier-plugin' Please assist me with this problem. Thank you! ...

javascripttypescriptsharepointgulpspfx

How can you automate the execution of unit tests in Angular before pushing changes to Git?

There have been instances in Angular projects where the unit tests are triggered every time a build is carried out, as well as when running the git push command. In case any tests fail during either of these commands, the process halts until all unit tes ...

javascriptnode.jsangulargitkarma-jasmine

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

Provide a response containing JSON data extracted from an HTML file

I am looking for a way to create a simple REST API using a hosting site that only allows hosting of HTML files along with JavaScript files. I want to be able to send POST/GET requests and receive JSON data in response. For instance, when making a GET requ ...

javascripthtml

Adobe Acrobat does not run JavaScript code in documents that are submitted for electronic signatures

Lately, I have been experiencing issues with pdfs that contain embedded javascript. The strange thing is that the javascript functions perfectly in the Acrobat Pro DC app but fails to execute when the document is sent for signature. To troubleshoot, I cre ...

javascriptadobeacrobat

Display dynamic content in a div using ajax and add animation effects, along with a "back" button functionality

I am in the process of creating a fantasy NFL web app using bootstrap and jQuery. Initially, I opted for Framework7 due to its user-friendly native app interface but decided to shift towards building a fully responsive page instead. Within my project, the ...

javascriptjqueryajax

Passing HTML form variables to the controller in C# .NET Core

I'm struggling with passing a variable from an HTML form to a controller in my .NET Core project. The variable I pass to the controller is then used in a method call within an interface. Here's my data model for the form: public class JourneyFor ...

c#htmlasp.net-corerazorasp.net-core-mvc

Tips on minimizing the vertical size of a mat field housing a mat-select dropdown

I need help reducing the height of a mat field that includes a mat-select in Angular v15. The code is directly from the material components documentation, with no alterations. It consists of a default table and default outline formfield. <mat-form-fi ...

cssangularangular-material

Incorporate highcharts data into your Laravel project using the power of AJAX

Encountering an issue with loading data for a Highcharts chart. The response from my controller provides the following data: [['Doctorado', 91.86],['Maestría', 6.98],['Licenciatura', 1.16]] Although the AJAX call is succes ...

javascriptjqueryajaxlaravelhighcharts

Transmitting various pieces of information using AJAX

Is it possible to send both "credit_uri" and "address" strings in one AJAX request? Currently, only the second string is being sent. How can I include both in the data of the request? $.ajax({ url: '#{add_cards_path}', type: 'POST&apo ...

javascriptjqueryajax

Storing information in a database

Need help troubleshooting why my form isn't saving data to the database. <div class="container"> <div class="row" style="margin-top:200px;"> <form ENCTYPE="multipart/form-data" ACTION="upload.php" METHO ...

phphtml

Storing JSON data in a concealed field and extracting it for use in a function

I have a function that retrieves the number of rows from a database table using JSON in my application. function getRowCount() { $.ajax({ headers: { 'Accept': 'application/json', 'Conte ...

ajaxjsonspringjquery

Troubleshooting Vee-validate scope issues in Nuxt.js and Vuetify

I'm experiencing an issue with validation using vee-validate and Vuetify: I have two forms with different scopes, both being submitted within one function. While the validation is functioning correctly upon submission, the input errors are not displa ...

javascriptvue.jsvuetify.jsnuxt.jsvee-validate

Angular2+ does not return any elements when using .getElementsByClassName() even if they are present

I have a question that seems simple, but I can't seem to find the answer anywhere. I've looked through past questions but still haven't found a solution... In my Angular template, there is a large amount of text inside a div, and some parts ...

javascriptangular

Modify class or id of element according to the parent element's class in JavaScript

Is there a way to update the class of a child element based on the parent element's class? For instance <div class="change"> <div class="show-more"></div> </div> If the parent has class="change", then change the child&ap ...

javascriptphphtml