Php scroll to top

Php – Scroll to top after Ajax content load

Is there anyway that I can make it so the page will automatically scroll to the top after the content has loaded (via Ajax)?

This is the code I have for displaying the content:

$(document).ready(function () < var my_layout = $('#container').layout(); $("a.item_link").click(function () < $("#loader").fadeIn(); feed_url = $(this).attr("href"); $.ajax(< type: "POST", data: "URL=" + feed_url, url: "view.php", success: function (msg) < $("#view-area").html(msg); $("#loader").fadeOut(); >>); return false; >); >); 

So after the ‘view-area’ has loaded its content can I make the page auto scroll to the top?

Best Solution

Just use the scroll function

$('html, body').animate(< scrollTop: 0 >, 0); //nice and slow :) $('html, body').animate(< scrollTop: 0 >, 'slow'); 

Related Solutions

Javascript – How to get jQuery to perform a synchronous, rather than asynchronous, Ajax request

From the jQuery documentation: you specify the asynchronous option to be false to get a synchronous Ajax request. Then your callback can set some data before your mother function proceeds.

Here’s what your code would look like if changed as suggested:

beforecreate: function (node, targetNode, type, to) < jQuery.ajax(< url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value), success: function (result) < if (result.isOk == false) alert(result.message); >, async: false >); > 

Javascript – How to manage a redirect request after a jQuery Ajax call

I read this question and implemented the approach that has been stated regarding setting the response HTTP status code to 278 in order to avoid the browser transparently handling the redirects. Even though this worked, I was a little dissatisfied as it is a bit of a hack.

After more digging around, I ditched this approach and used JSON. In this case, all responses to AJAX requests have the status code 200 and the body of the response contains a JSON object that is constructed on the server. The JavaScript on the client can then use the JSON object to decide what it needs to do.

I had a similar problem to yours. I perform an AJAX request that has 2 possible responses: one that redirects the browser to a new page and one that replaces an existing HTML form on the current page with a new one. The jQuery code to do this looks something like:

The JSON object «data» is constructed on the server to have 2 members: data.redirect and data.form . I found this approach to be much better.

Источник

Scrol page to top using php

That way you can make AJAX request when scrolling position is of necessary value, and insert returned HTML into the page. Or in your case create a file that will accept a GET request with section number, and render the output of needed section file as its done in most PHP frameworks (see below).

Refresh page on scroll to top of page

I am creating a website in php , in which I want a division to reload by javascript when the user scroll to the top of the page.

Can anyone guide me how to do this with example?

With using something like jQuery you can do it like this;

Note; the .scroll function is firing each pixel you scroll, for browserload you might want to add a timeout for this

You need to watch the scrollTop value. Simple example:

How To Create a Scroll Back To Top Button, This example demonstrates how to create a «scroll to top» button that becomes visible when the user starts to scroll the page.

Create a «Scroll To Top» Button with HTML, CSS & JavaScript

In this video we’re going to create a «Scroll To Top» button using plain HTML, CSS and Duration: 11:00

Jquery Scroll To Top Tutorial

Why does the page scroll up when I submit a form?

I have made the following form. When I select any of the options, the page automatically scrolls up. Any ideas how do I fix it?

  
 [All languages] English Portuguese French Italian Japanese 
 

The page isn’t scrolling up.

The form is submitting, and the page is reloading.

The new version of the page loads from the top.

As you are submitting the page, it reloads at the top.

First get the scroll position before submitting and submit it with the form :

  
 [All languages] English Portuguese French Italian Japanese   

Then edit your body tag to set this position again when page is loaded :

Automatically scroll to bottom as the page loads, Your example gave me an idea, tested it and it works. 🙂 I basically added an echo ‘

Loading entire page sections based on scroll position

I am developing a one page website and I would like to load in each section when the window scrolls to that specific section. Now I know you can lazyload images but I want to lazy load the entire section. The only way I think it would be possible is if I put my html code into jQuery then load it in when the scroll position is reached. But I would prefer not to do this.

This is a wordpress website and I am loading each page through into the homepage using

so my page is layed out something like this

So could I use php to only load these sections in when the scroll position is reached or is there a better way with jQuery? Also I want web crawlers etc to still be able to see my whole page. So if jQuery is disabled I want the full page to show. Any guidance or tutorials on this would be very helpful thanks

Create a method in controller that will render a sub-view based on the section number and return you the HTML. Or in your case create a file that will accept a GET request with section number, and render the output of needed section file as its done in most PHP frameworks (see below). That way you can make AJAX request when scrolling position is of necessary value, and insert returned HTML into the page.

May I suggest that you load the content and hide it with CSS instead? And then make a scroll spy solution to display the content when the section enters viewport? Why force someone to wait while the contents loads?

How to open a webpage on bottom and auto-scroll to the top so that, If I need PHP or Jquery please explain where to put the code, I am new. Thank you! I tried to do this with anchors, but they just jump to a

Источник

Scroll top function in php code example

Solution 2: You can use jquery code to do scroll top Solution 3: I am not good in this, but still check below process if that works, check onbeforeunload event if that event occurs set the cookie, and on page check if the cookie is set then fire scroll to top event. If value specified is greater than maximum scroll amount, then the value is set to maximum number.

Scroll to top after history.back

Use below script in that page, in which you want to go to top of page.

 $(window).bind("pageshow", function() < $("html, body").animate(< scrollTop: 0 >, 600); >); 

You can use jquery code to do scroll top

I am not good in this, but still check below process if that works,

check onbeforeunload event if that event occurs set the cookie, and on page check if the cookie is set then fire scroll to top event.

After that once scroll to top event occurs change the cookie value again.

Not at all sure this will work and it is a right solution, but just tried to think how it can be implemented.

Using scrollTop to show pixels scrolled

Next time try a little harder before you ask:

It's really as simple as the following:

(function(window, document, $, undefined) < $(function() < var win = $(window), ele = $('.pixels'); win.scroll(function() < ele.text(win.scrollTop()); >); >); >)(window, document, jQuery); 

Try using document.getElementsByTagName("body")[0].scrollTop

JQuery scrollTop(), The jQuery scrollTop method is used to set or return the vertical scrollbar position for the selected element. When the scrollbar is on the top, it specifies the position 0. To return the position: When this method is used to return the position, it provides the current vertical position of the first matched element in the set.

Div scrolls to top after refresh need to stop auto scroll to the top

from the scars infos I can gather here I think your best bet would be to save your current scroll position before you refresh and after the ajax call scroll to that saved position. use jQuerys .scrollTop() function for both reading and setting the scroll.

some pseudo code for illustration:

at ajax refresh function var curPos $(element).scrollTop(); . do ajax call .. ajax callback: $(element).scrollTop(curPos); 

HTML DOM Element scrollTop Property, Get the number of pixels the content of "myDIV" is scrolled: const element = document.getElementById("myDIV"); let x = elmnt.scrollLeft; let y = elmnt.scrollTop; Try it Yourself ». Scroll the contents of "myDIV" TO 50 pixels horizontally and 10 pixels vertically: const element = document.getElementById("myDIV"); …

HTML | DOM scrollTop Property

The DOM scrollTop property is used to return or set the number of pixels an element is scrolled vertically. If the element’s content doesn’t generate a scroll bar, then its scrollTop value is 0.

Where value specifies the number of pixels the element’s content is scrolled vertically.

• It’s value can’t be negative.
• If value specified is greater than maximum scroll amount, then the value is set to maximum number.

Источник

mikeoberdick / scroll_to_top.php

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters

//HTML

< div class = " scrollToTopBtn " > < img src =" " alt =" jump to top of page " > TOP

//JS

var scrollToTopBtn = document.querySelector(".scrollToTopBtn")

var rootElement = document.documentElement

function handleScroll()

// Do something on scroll

var scrollTotal = rootElement.scrollHeight - rootElement.clientHeight

if ((rootElement.scrollTop / scrollTotal ) > 0.10)

// Show button

scrollToTopBtn.classList.add("showBtn")

> else

// Hide button

scrollToTopBtn.classList.remove("showBtn")

>

>

function scrollToTop()

// Scroll to top logic

rootElement.scrollTo(

top: 0,

behavior: "smooth"

>)

>

scrollToTopBtn.addEventListener("click", scrollToTop)

document.addEventListener("scroll", handleScroll)

//CSS

.scrollToTopBtn

cursor: pointer;

position: fixed;

bottom: 30px;

right: 30px;

background: rgba(256, 256, 256, .5);

z-index: 1;

height: 50px;

width: 50px;

opacity: 0;

border-radius: 25px;

display: flex;

justify-content: center;

align-items: center;

box-shadow: 0 3px 6px rgba(0,0,0,.16);

transform: rotate(180deg) translateY(-100px);

transition: all .5s ease;

img

width: 35px;

>

&.showBtn

opacity: 1;

transform: rotate(180deg) translateY(0);

>

>

Источник