Scrolling back to the top of the page using Jquery instead of a specific div

Check out the code for my project here. The isotope feature is functioning correctly, however, when clicking on the image, instead of scrolling to the navigation under the red box as intended, the page scrolls all the way to the top.

If I modify the following code:

// Portfolio Open and close   
$(document).ready(function() {
  $('.portfolio li a').click(function() {
    var itemID = $(this).attr('href');
    $('.portfolio').addClass('item_open');

to:

// Portfolio Open and close   
$(document).ready(function() {
  $('.gallery li a').click(function() {
    var itemID = $(this).attr('href');
    $('.gallery').addClass('item_open');

The portfolio opens and closes smoothly with the change, but then the isotope functionality stops working.

Any suggestions? I've been troubleshooting this issue for almost two weeks now. It's driving me crazy.

javascriptjqueryhtmlcssjquery-isotope

Answer №1

If you're looking for something similar to this example http://jsfiddle.net/qywaLszg/6/embedded/result/

Updated Information

In order to modify your ul list, make sure to adjust the classes when calling the filter function.

For a functioning demonstration, refer to this link http://jsfiddle.net/qywaLszg/9/embedded/result/

$('#filter li a').click(function () {
         $('#filter li.selected').removeClass('selected');
         $(this).parent().addClass('selected');
         var selector = $(this).parent().attr('data-filter');
         $container.isotope({
             filter: selector,
             animationOptions: {
                 duration: 750,
                 easing: 'linea',
                 queue: false
             }
         });
         return false;
     });

Suggested CSS Adjustment

#portfolio{
    position: relative;
}

Additionally, include this in your jQuery script 

$(".portfolio ul li a").click(function () {
     $('html, body').animate({
         scrollTop: $("#top").offset().top
     }, 400);
 });

Answer №2

Probably because parseInt doesn't work with strings.

$(".gallery ul li a").click(function() {
 $('html, body').animate({
  scrollTop: parseInt($("#top").offset().top)
 }, 400);
});

Additionally, you can include

return false;

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

Attempting to modify the background hue of a grid component when a click event is triggered

I am struggling with the syntax to change the color of an element in my grid when clicked. I have attempted different variations without success. Being new to JavaScript, I would appreciate some gentle guidance if the solution is obvious. JS const gri ...

javascripthtmlcss

Improving Modal Closure on Form Submission Suggestions

Seeking Assistance with Modal Closure After Form Submission I understand that this inquiry may have been posed by someone else before, but I require guidance specifically for my code pertaining to handling form submission with AJAX. As a newcomer to AJAX, ...

phphtmljqueryajax

Angular.js encountered an error at line 13550: [ng:areq] The argument 'popCntrl' is expected to be a function, but it was undefined

I have been diving into learning AngularJS on my own recently, and I've been attempting to create a basic popup feature. However, I keep encountering the error mentioned in the title. While searching for solutions, I haven't found any examples th ...

javascriptangularjsmodule

After examining the width properties in the CSS code, it was discovered that one particular icon is larger in

Is there a way to adjust the width of the first icon in my container using CSS? The first icon appears larger than the others, and I'm having trouble making it the right size. #features { margin-top: 35px; } .grid { display: flex; } #feat ...

htmlcssfont-awesome

Steps for eliminating the overlay on top of the padding region

My current code includes an overlay over images, but the overlay extends beyond the image itself and covers the padding area as well. If I switch the padding to margin in order to eliminate this unnecessary overlap, it causes the last image to be pushed on ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best method for inserting the HTML content from a specific div into a textarea?

Everything seems to be working fine, but once I insert the HTML into the textarea, an issue arises where the div gets wrapped within another div, causing the layout to break. var urls = []; $('body').on('click', '.btn_video&apos ...

javascriptjquery

Query: How can I retrieve the value of a td element in a dynamic table?

Below is an example of how the table will be structured: <tr class="A" id="A${a.index}"> //id will be generic such as 1,2,3,4,5 <table id="mytable"> <tr> <td>a</td> <td>b</td> ...

jquery

Instructions for creating scrollable MaterializeCSS tabs when there are too many tabs to fit within the width of the container without scrolling

Here is an example code (SSCCE) that showcases the issue I am facing. The MaterializeCSS frontend framework documentation states: Scrollable Tabs Tabs automatically become scrollable Source However, when I attempt to use more tabs than can fit on the ...

jqueryhtmlcssmaterial-designmaterialize

Exploring the capabilities of Angular's ngResource library and how it

Currently, I am developing a Twitch app and instead of using $http, I opted for ngresource to explore new possibilities. However, I encountered an issue with the offline tab where the users are visible but their logo or username is not displayed. This happ ...

javascriptangularjsarraysangular-promiseangularjs-ng-resource

Arrange two absolute divs side by side without overlapping each other

I have a specific layout configuration: <div id="container"> <div class="left"> 1 </div> <div class="left"> 1 </div> <div class="right"> 2 </div> </div> My goal is to stack the left divs on top ...

htmlcss

Conflict between the top menu and body on the HTML page is causing issues

Encountered an issue with my HTML code: CSS: .fixedmenu { overflow: hidden; background-color:rgb(153,0,51); position: fixed; /* Ensures the navbar stays in place */ top: 0; /* Positions it at the top of the page */ width: 100%; /* Occ ...

htmlcss

Expand the capabilities of a jQuery plugin by incorporating new functions or modifying existing ones

I have a task to enhance the functionality of a jQuery Plugin (https://github.com/idiot/unslider) by adding another public method. (function(){ // Store a reference to the original remove method. var originalMethod = $.fn.unslider; // Define a ...

javascriptjquerypluginsextendunslider

Exploring the Power of React's Ref API

Currently, I am following tutorials on Udemy by Max where he discusses how to work with Ref Api's in React 16.3. In one of the lectures, he demonstrated creating a ref inside a container class, not App.js, using this.lastref = React.createRef();. He ...

javascriptreactjs

System for Node.js execution replay logging

Running a straightforward script that performs various tasks can be tedious when trying to debug errors. The log messages scattered throughout the code clutter the file, requiring more and more console.log entries for detailed information. Instead of fill ...

javascriptnode.jsdebuggingjavascript-debugger

In search of assistance with creating a function that can transform an asynchronous function into a time-limited version

Let's discuss the challenge requirements: Given a function called fn that operates asynchronously and a time limit t in milliseconds, the goal is to create a new version of this function with a time constraint. This new function should behave accordi ...

javascriptnode.jsasynchronouspromisetimeout

Creating crawlable AMP versions of Angular websites

Having an Angular website where I dynamically load object properties, I am creating separate AMP sites for each of these objects. Typically, I would link to the AMP site from the canonical site. However, the issue arises because the crawler cannot find the ...

javascripthtmlangularjsangularamp-html

Exploring Joomla: Customizing Template Options for Individual Menu Items

Hey there! I'm currently working on a website using Joomla 1.5 and I'm wondering if it's possible to load different template options based on the menu item ID. I came across the Gantry Framework (http://www.gantry-framework.org) which allow ...

phpjquerytemplatesjoomla1.5menuitem

ng serve issue persists even after resolving vulnerabilities

Can anyone assist me in resolving why I am unable to start my project after fixing 3 high vulnerabilities? I ran npm audit to identify the vulnerabilities and then used npm install --save-dev @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_em ...

javascriptangulartypescriptnpm

Charting Add-Ons for jQuery

Looking for suggestions on user-friendly graph drawing plugins compatible with jQuery. Currently developing a web application that will retrieve data from a remote database and present it through visual graphs... Explored jgcharts (the jQuery Google Chart ...

phpjavascriptjqueryhtmlgoogle-visualization

Is it possible to nest an array within a value of a Sass object?

I'm currently attempting to incorporate an array within the value of an object. $background-things: ( 'a': ['100vh', 'transparent', 'column'], 'higher': ['70vh', '#000', &ap ...

csssass