javascript - How to make sure that back button takes me to section where I was there before I clicked an image? - Stack Overflow

admin管理员组

文章数量:1026329

I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detailponent.html) is shown below:

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

Problem Statement:

Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.

Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.

I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.ponent.html) is shown below:

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

Problem Statement:

Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.

Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.

• javascript
• jquery
• html
• angular-ponents

Share Improve this question Follow edited Apr 18, 2018 at 14:56 flash asked Apr 18, 2018 at 5:53 flashflash 1,5191313 gold badges7373 silver badges160160 bronze badges 4

• 1 yes, it's possible. but what have you tried? – apple apple Commented Apr 18, 2018 at 6:00
• hey.. I have tried using window history stuff but it doesnt work so thats why I was confuse whether its even possible or not. – flash Commented Apr 18, 2018 at 6:05
• then you should include it in question. – apple apple Commented Apr 18, 2018 at 6:07
• window.history stuff have you looked at pushing and popping states the technology is called pushState developer.mozilla/en-US/docs/Web/API/…. – Barkermn01 Commented Apr 26, 2018 at 13:12

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 1

If you want to go back, you should use the back() function in javascript

function goBack() {
    window.history.back();
}

<button onclick="goBack()">Go Back</button>

Here is a small example of how to use it, now you can just adapt it to your page

You can do that by adding the id here

<p id="item-back-bar-link">
   <a id="item-back-bar-link" href="/attendee-home/{{id}}">
       // ....
  </a>
</p>

Now there are multiple way to get the id. You can use the window.location properties or if in same ponent pass this id to a property binding

Here is how I would do it. On a separate note, having the same ID across multiple levels may not be a good idea.

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
    </div>

<script>
window.document.getElementById('back').addEventListener('click', function(e){
     window.history.back();
     e.preventDefault();
});
</script>

Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem. See implementation below.

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
    </div>

Your ts file should have these lines.

import {Component} from '@angular/core';
import {Location} from '@angular/mon';

@Component({
// ponent's declarations here
})
class SomeComponent {
    constructor(private _location: Location) {
    }
    goBackClicked() {
        this._location.back();
    }
}

y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).

If your page is scrolled and you want to maintain your scroll position while ing back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.

Link to ScrollTop in MDN. Also Check Window.To for scrolling.

Sample Angular project to show Element.ScrollTop: https://stackblitz./edit/angular-qdjmny.

Click page1, scroll the sample list to navigate, when u back, the scoll will be maintained.

Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.ponent.html ponent.

Really theses ments are right. If you want go back page you can use the mand window.history.go(-1) or window.history.back()

You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:

<a href="http://www.mypage.be/home#gobackto_id". 

I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detailponent.html) is shown below:

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

Problem Statement:

Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.

Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.

I have an HTML page in which there are list of images around 4-5. The HTML code of individual image (item-detail.ponent.html) is shown below:

<span class="badge" id="heart-badge{{item.$id}}">
  <div (click)="badgeHeartEmpty()" id="heartHide{{item.$id}}">
    <img id="badge-item-heart-noborder-empty" src="/assets/images/Empty-Heart.png">
  </div>
  <div [style.display]= " 'none' " (click)="badgeHeartFull()" id="heartShow{{item.$id}}">
    <img id="badge-item-heart-noborder-full" src="/assets/images/Full-Heart-Blue.png">
  </div>
</span>

<!-- This is the code which shows item images and item details -->
<a href="/attendee-item/{{item.$id}}">
    <img class="card-img-top" src="{{item.image_url}}" alt="Card image cap" id="card-img">
    <div class="card-body">
        <div class="auction-item-title">
            <h1 id="auction-item-title">{{item.name}}</h1>
        </div>
        <div class="auction-item-bid-title">
            <div class="auction-item-title-left">
                <p id="auction-item-bid-title">Current Bid: ${{item.bid}}</p>
                <p id="auction-item-bid-title">Value: ${{item.value}}</p>
            </div>

            <div class="auction-item-title-right">
                <p id="auction-item-bid-title2">About this item</p>
            </div>

        </div>
    </div>
</a>
<bid-button [item]="item"></bid-button>

Now if I click above item (as you can see there is a href tag on it) then it shows me detailed description of that image on a new page and that page also has a back button at the top. Below is the code for back button on that new page:

<div class="item-top-bar">
    <div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="item-back-bar-link" href="/attendee-home"><</a></p>
    </div>
    <div class="item-pagination-bar">
        <a (click)="prevItem()"><p id="item-pagination-bar-text">LAST ITEM</p></a>
        <a (click)="nextItem()"><p id="item-pagination-bar-text">NEXT ITEM</p></a>
    </div>
</div>

Problem Statement:

Now if I click back button then it takes me to the home page but instead what I want is it should take me to the section of image where I was before.

Is this possible to do? I mean if I have may sections of images and if I click lets say 4th image then it will open detailed description of that fourth image page and now if I press back button then it should take me to fourth section of image where I was before.

• javascript
• jquery
• html
• angular-ponents

Share Improve this question Follow edited Apr 18, 2018 at 14:56 flash asked Apr 18, 2018 at 5:53 flashflash 1,5191313 gold badges7373 silver badges160160 bronze badges 4

• 1 yes, it's possible. but what have you tried? – apple apple Commented Apr 18, 2018 at 6:00
• hey.. I have tried using window history stuff but it doesnt work so thats why I was confuse whether its even possible or not. – flash Commented Apr 18, 2018 at 6:05
• then you should include it in question. – apple apple Commented Apr 18, 2018 at 6:07
• window.history stuff have you looked at pushing and popping states the technology is called pushState developer.mozilla/en-US/docs/Web/API/…. – Barkermn01 Commented Apr 26, 2018 at 13:12

Add a ment  | 

8 Answers 8

Sorted by: Reset to default 1

If you want to go back, you should use the back() function in javascript

function goBack() {
    window.history.back();
}

<button onclick="goBack()">Go Back</button>

Here is a small example of how to use it, now you can just adapt it to your page

You can do that by adding the id here

<p id="item-back-bar-link">
   <a id="item-back-bar-link" href="/attendee-home/{{id}}">
       // ....
  </a>
</p>

Now there are multiple way to get the id. You can use the window.location properties or if in same ponent pass this id to a property binding

Here is how I would do it. On a separate note, having the same ID across multiple levels may not be a good idea.

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" href="#">Back</a></p>
    </div>

<script>
window.document.getElementById('back').addEventListener('click', function(e){
     window.history.back();
     e.preventDefault();
});
</script>

Angular has Location which is a service that applications can use to interact with a browser's URL. It is what you need in order to solve your problem. See implementation below.

<div class="item-back-bar">
    <!-- This is the back button and it takes me to home page but instead it should take me to section of image where I was there and clicked it -->
        <p id="item-back-bar-link"><a id="back" (click)="goBackClicked()">Back</a></p>
    </div>

Your ts file should have these lines.

import {Component} from '@angular/core';
import {Location} from '@angular/mon';

@Component({
// ponent's declarations here
})
class SomeComponent {
    constructor(private _location: Location) {
    }
    goBackClicked() {
        this._location.back();
    }
}

y not just get the position of the image when it is clicked with .position() and when returned from the image to the page you can get back to the same position with $(window).scrollTop(value).

If your page is scrolled and you want to maintain your scroll position while ing back from the detailed description page, then you can store the current page's vertical scroll position in a service and while navigating back, you can set the scroll position back from service.

Link to ScrollTop in MDN. Also Check Window.To for scrolling.

Sample Angular project to show Element.ScrollTop: https://stackblitz./edit/angular-qdjmny.

Click page1, scroll the sample list to navigate, when u back, the scoll will be maintained.

Also make sure, in your [routerLink] of your detailed description page you are linking to the item-detail.ponent.html ponent.

Really theses ments are right. If you want go back page you can use the mand window.history.go(-1) or window.history.back()

You can use an anchor tag for this. You need to give the part of the page you go back to an "id", like "gobackto_id". Then you can use this in your "" element in the "href" like this:

<a href="http://www.mypage.be/home#gobackto_id". 

本文标签：