Method and apparatus for page viewport scrolling

Abstract

Embodiments of the present disclosure disclose a method and device for page viewport sliding. A specific embodiment of the method comprises: obtaining a first distance between a scrolled page element and a top of a page; in response to detecting a user triggered operation of returning to the top of the page, performing an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; calculating a first target position of the page element after movement by subtracting the second distance from the first distance; moving the page element upward to the first target position and obtaining a current distance between the page element after movement and the top of the page; if the current distance is 0, stopping the upward movement of the page element; if the current distance is not 0, taking the current distance as the first distance and performing the above-mentioned upward movement step. The embodiment realizes a smooth movement effect with continuously decaying speed and solves the problem of low efficiency of movement.

Description

TECHNICAL FIELD

[0001] Embodiments of the present disclosure relate to the field of computer technology, and in particular, to a method and device for page viewport sliding. BACKGROUND

[0002] There are three methods for returning to the top of a webpage in the prior art: 1. fixed speed timer movement, 2. time dimension timer movement, and 3. existing API of the browser.

[0003] The prior art cannot guarantee the precision of movement time. The reason is that the delay of the second parameter of the timer can only guarantee when the movement function is added to the browser task queue, but cannot guarantee whether it can be executed immediately. When there are other tasks in the browser task queue or the browser main thread is busy, the movement function has to wait for the previous task to be executed before it is executed. The problem is that the movement seen may have a stuttering phenomenon, so the timer cannot guarantee the smoothness of the movement.

[0004] In addition, the visual experience of the prior art is poor, and the use of the page scrolling method provided by the browser itself is also prone to browser incompatibility problems. SUMMARY

[0005] Embodiments of the present disclosure provide a method and device for page viewport sliding.

[0006] In a first aspect, embodiments of the present disclosure provide a method for page viewport sliding, comprising: obtaining a first distance between a scrolled page element and a top of a page; in response to detecting a user-triggered operation of returning to the top of the page, performing an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; calculating a first target position of the page element after movement by subtracting the second distance from the first distance; triggering the page element to move upward to the first target position, and obtaining a current distance between the page element after movement and the top of the page; if the current distance is 0, stopping the page element from moving upward; if the current distance is not 0, taking the current distance as the first distance to perform the above-mentioned upward movement step.

[0007] In some embodiments, the timing execution of the above-mentioned upward movement step comprises: obtaining a screen refresh frequency; and determining a time interval for executing the above-mentioned upward movement step according to the screen refresh frequency.

[0008] In some embodiments, the timing execution of the above-mentioned upward movement step comprises: determining a time interval for executing the above-mentioned upward movement step based on the requestAnimationFrame of the browser.

[0009] In some embodiments, the first predetermined ratio is proportional to the first distance.

[0010] In some embodiments, the method further comprises: obtaining a third distance of the scrolling page element from the page bottom; in response to detecting a user-triggered operation of jumping to the page bottom, performing a downward movement step: reducing the third distance by a second predetermined ratio to obtain a fourth distance; calculating a second target position of the page element after movement by subtracting the fourth distance from the third distance; triggering the page element to move downward to the second target position, and obtaining a current distance of the page element from the page bottom after movement; if the current distance of the page element from the page bottom is 0, stopping the page element from moving downward; and if the current distance of the page element from the page bottom is not 0, setting the current distance of the page element from the page bottom as the third distance to perform the above-mentioned downward movement step.

[0011] In some embodiments, the timing execution of the above-mentioned downward movement step comprises: obtaining a screen refresh frequency; and determining a time interval for performing the above-mentioned downward movement step according to the screen refresh frequency.

[0012] In some embodiments, the timing execution of the above-mentioned downward movement step comprises: determining a time interval for performing the above-mentioned downward movement step based on a requestAnimationFrame of a browser.

[0013] In some embodiments, the second predetermined ratio is proportional to the third distance.

[0014] In the second aspect, embodiments of the present disclosure provide a device for page viewport sliding, comprising: a detection unit configured to obtain a first distance of a scrolling page element from a page top; a movement unit configured to, in response to detecting a user-triggered operation of returning to the page top, perform an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; calculating a first target position of the page element after movement by subtracting the second distance from the first distance; triggering the page element to move upward to the first target position, and obtaining a current distance of the page element from the page top after movement; if the current distance is 0, stopping the page element from moving upward; and a timing unit configured to, if the current distance is not 0, set the current distance as the first distance to perform the above-mentioned upward movement step.

[0015] In some embodiments, the timing unit is further configured to: obtain a screen refresh frequency; and determine a time interval for performing the above-mentioned upward movement step according to the screen refresh frequency.

[0016] In some embodiments, the timing unit is further configured to determine the time interval for performing the above-mentioned upward movement step based on a screen refresh frequency.

[0017] In some embodiments, the first predetermined ratio is proportional to the first distance.

[0018] In some embodiments, the detecting unit is further configured to obtain a third distance between the scrolled page element and the page bottom. The moving unit is further configured to, in response to detecting a user-triggered operation of jumping to the page bottom, perform a downward movement step: reducing the third distance by a second predetermined ratio to obtain a fourth distance; calculating a second target position of the page element after movement by subtracting the fourth distance from the third distance; triggering the page element to move downward to the second target position, and obtaining a current distance between the page element after movement and the page bottom; and stopping the page element from moving downward if the current distance between the page element and the page bottom is 0. The timing unit is further configured to, if the current distance between the page element and the page bottom is not 0, take the current distance between the page element and the page bottom as the third distance to perform the above-mentioned downward movement step.

[0019] In some embodiments, the timing unit is further configured to obtain a screen refresh frequency, and determine the time interval for performing the above-mentioned downward movement step according to the screen refresh frequency.

[0020] In some embodiments, the timing unit is further configured to determine the time interval for performing the above-mentioned downward movement step based on a browser requestAnimationFrame calculation.

[0021] In some embodiments, the second predetermined ratio is proportional to the third distance.

[0022] In a third aspect, embodiments of the present disclosure provide an electronic device for page viewport sliding, comprising: one or more processors; a storage device having one or more programs stored thereon, when the one or more programs are executed by the one or more processors, the one or more processors implement the method of any one of the first aspect.

[0023] In a fourth aspect, embodiments of the present disclosure provide a computer readable medium having a computer program stored thereon, wherein the program, when executed by a processor, implements the method of any one of the first aspect.

[0024] The method and device for page viewport sliding provided by the embodiments of the present disclosure perform the scrolling motion effect of element viewport by dynamically calculating the distance of each motion, realize a high-efficiency, speed-continuously-declining smooth motion effect, and solve the problems of low efficiency of motion and instability of timer motion. BRIEF DESCRIPTION OF DRAWINGS

[0025] Other features, objects and advantages of the present disclosure will become more apparent from the following detailed description of non-limiting embodiments made with reference to the attached drawings:

[0026] Figure 1 is an exemplary system architecture diagram to which an embodiment of the present disclosure can be applied;

[0027] Figure 2 is a flowchart of one embodiment of the method for page viewport sliding according to the present disclosure;

[0028] Figure 3 is a schematic diagram of one application scenario of the method for page viewport sliding according to the present disclosure;

[0029] Figure 4 is a flowchart of another embodiment of the method for page viewport sliding according to the present disclosure;

[0030] Figure 5 is a schematic diagram of the application scenario of another embodiment of the method for page viewport sliding according to the present disclosure;

[0031] Figure 6 is a structural schematic diagram of one embodiment of the device for page viewport sliding according to the present disclosure;

[0032] Figure 7 is a structural schematic diagram of a computer system of an electronic device suitable for implementing the embodiments of the present disclosure. DETAILED DESCRIPTION

[0033] The present disclosure will be further described below in conjunction with the drawings and embodiments. It can be understood that the specific embodiments described herein are only used to explain the related application, and not to limit the application. In addition, it should be noted that, for the convenience of description, only the parts related to the application are shown in the drawings.

[0034] It should be noted that the embodiments in the present disclosure and the features in the embodiments can be combined with each other without conflict. The present disclosure will be described in detail below with reference to the drawings and in conjunction with the embodiments.

[0035] Figure 1 An exemplary system architecture 100 to which an embodiment of the method for page viewport sliding or the device for page viewport sliding of the present disclosure can be applied is shown.

[0036] As shown in Figure 1 The system architecture 100 can include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is a medium for providing a communication link between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0037] A user can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0038] The terminal devices 101, 102, 103 can be hardware or software. When the terminal devices 101, 102, 103 are hardware, they can be various electronic devices with display screens and support for web browsing, including but not limited to smartphones, tablet computers, e-book readers, MP3 (Moving Picture Experts Group Audio Layer III) players, MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, desktop computers, etc. When the terminal devices 101, 102, 103 are software, they can be installed in the above-mentioned electronic devices. They can be implemented as multiple software or software modules (e.g., to provide distributed services), or as a single software or software module. No specific limitation is made herein.

[0039] The server 105 can be a server that provides various services, such as a background web server that supports web pages displayed on the terminal devices 101, 102, 103. The background web server can analyze and process received web page requests and other data, and feed back the processing results (e.g., web page data) to the terminal devices.

[0040] It should be noted that the server can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster composed of multiple servers, or as a single server. When the server is software, it can be implemented as multiple software or software modules (for example, multiple software or software modules used to provide distributed services), or as a single software or software module. No specific limitation is made here. The server can also be a server of a distributed system, or a server combined with a blockchain. The server can also be a cloud server, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology.

[0041] It should be noted that the page viewport sliding method provided by the embodiments of the present disclosure can be executed by the terminal device 101, 102, 103. Accordingly, the page viewport sliding apparatus can be arranged in the terminal device 101, 102, 103. No specific limitation is made here.

[0042] It should be understood that Figure 1 The number of terminal devices, networks, and servers in

[0043] With reference to Figure 2 , a flow 200 of one embodiment of the page viewport sliding method according to the present disclosure is shown. The page viewport sliding method includes the following steps:

[0044] Step 201, obtaining a first distance between a scrolled page element and a top of a page.

[0045] In the present embodiment, the execution subject of the page viewport sliding method (for example, the terminal device shown in Figure 1 ) can obtain the first distance between the scrolled page element and the top of the page through an internal function of a browser or other APP that displays a page. For example, the page element can be a scroll bar that can be scrolled, and the first distance between the scrolled page element and the top of the page can be obtained through a scrollTop function.

[0046] Step 202, in response to detecting a user-triggered operation of returning to the top of the page, performing an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance.

[0047] In the present embodiment, a button of returning to the top of the page can be set in the page, and the user triggers the operation of returning to the top of the page after clicking the button. The button can be a button that is always floating on the page, or can be a button in other forms. In addition to the button of returning to the top of the page, some gesture operations can also be defined to represent returning to the top of the page, for example, pressing the page and sliding upward.

[0048] The first distance here represents the distance between the scrolling page element and the top of the page. The second distance represents the movement distance of the first distance after being reduced by a first predetermined ratio, i.e. the distance of the page element after each execution of the movement. The "first distance", "second distance", "third distance", and "fourth distance" are only used to distinguish the use of the distances, and do not represent the length of the distances. After obtaining the element scrolling distance scrollTop value, the value is reduced by a ratio, for example, reduced by 0.08 times, and then the movement distance can be obtained by multiplying scrollTop by 0.08.

[0049] Step 203, the first distance is reduced by the second distance to calculate the first target position of the page element after the movement.

[0050] In the embodiment, the first distance is the original position, the second distance is the movement distance, and the first target position of the page element after the movement (the relative position to the top of the page) is obtained by reducing the first distance by the second distance. If the value obtained by reducing the first distance by the second distance is less than or equal to 0, it is indicated that the next movement can reach the top, and the first target position is set to 0.

[0051] Step 204, triggering the page element to move upwards to the first target position, and obtaining the current distance between the page element after the movement and the top of the page.

[0052] In the embodiment, the related function can be called to trigger the page element to move upwards to the first target position. For example, after the first target position is assigned to the scrollTop attribute of the html element, the effect of the element viewport moving upwards is triggered once. The current distance between the page element after the movement and the top of the page is obtained again, which is used to determine whether to continue to move upwards.

[0053] Step 205, if the current distance is 0, stopping the page element from moving upwards.

[0054] In the embodiment, if the current distance is 0, it is indicated that the page element has reached the top and does not need to move upwards again.

[0055] Step 206, if the current distance is not 0, the current distance is used as the first distance to execute the step of moving upwards.

[0056] In the embodiment, if the current distance is not 0, the page element has not reached the top and needs to execute the step of moving upwards again. The step of moving upwards can be executed at a fixed time interval, for example, executed once every 17 ms.

[0057] In some optional implementations of the embodiment, the timing of the upward movement step comprises: obtaining a screen refresh frequency; and determining a time interval for executing the upward movement step according to the screen refresh frequency. In this way, the number of screen refreshes per second and the number of times of movement of the page element are matched to achieve the best animation effect, and the user will not feel lag due to visual frame loss.

[0058] During the upward movement of the page element, the user can at any time suspend the page scrolling, for example, when clicking the page or switching the page.

[0059] The method provided by the above embodiment of the present disclosure calculates the distance of each movement by scaling based on the scrolling distance of the page element itself, thereby forming an efficient and smooth movement effect and providing a high-quality visual experience for the user. In addition, since the distance of each movement is calculated by scaling the scrolling height of the page element, the consistent movement visual effect can be maintained regardless of how large or long the scrolling distance of the page element is, that is, starting from a maximum movement speed and decaying to 0.

[0060] In some optional implementations of the embodiment, the timing of the upward movement step comprises: calculating the time interval for executing the upward movement step based on the requestAnimationFrame of the browser. The requestAnimationFrame method is used to replace the timer to execute the movement, thereby improving the smoothness and performance of the movement. The method achieves the movement through function loop calling, and does not need to manually set the running interval time. The browser automatically calculates the execution interval of the animation function to match the number of movements of the function per second with the number of screen refreshes of the browser to achieve the best animation effect. In addition, the requestAnimationFrame method also improves the performance of the browser. When the page is switched to the background, the browser will perform flow control on the page based on the timer, but will pause the execution of the requestAnimationFrame, thereby improving the performance of the browser by saving resource occupation.

[0061] Figure 3 A schematic diagram of one application scenario of the method of page viewport sliding according to the present disclosure is shown. Figure 3 In the application scenario, the user clicks the "back to top button" at the lower right corner of the mobile phone screen, and the scroll bar of the page moves upward by a second distance. The mobile phone calculates whether the moved scroll bar reaches the top, and if not, continues to move upward at a time interval. The second distance of each movement is the result of the reduction of the distance before the movement.

[0062] The present technology is applicable to any scrollable web page element, and the html element is taken as an example for illustration.

[0063] 1. First add a button to the top of the page, here using a button element as the button, and then use css to add a position: fixed style to make the element based on the browser window positioning; Add right: 10px and bottom: 10px two styles to keep the element at the bottom right corner of the browser window.

[0064] 2. Declare a variable btn in js, and get the reference of the button element by document.querySelector method and assign it to the btn variable. The motion function will be bound to the variable later.

[0065] 3. Implement motion logic

[0066] Declare a function named toMove, which will encapsulate all the motion logic in the function.

[0067] (1) Declare variable scrollTop, and use document's querySelector method to get the reference of the html element, and then assign the scrollTop value of html to the variable.

[0068] (2) Execute motion. This is the key point of how this technology achieves efficient and smooth motion. When the element scroll distance scrollTop value is obtained, it is scaled down by a certain proportion, for example, scaled down by 0.08 times, so you can get the motion distance by multiplying scrollTop by 0.08. Then subtract the motion distance from the scrollTop value to calculate the target position of this time up motion. Finally, assign the target position to the scrollTop attribute of the html element, which will trigger the effect of the element viewport moving up. Here, because the motion distance is calculated by multiplying the element scroll distance by 0.08 times, and this motion function is called recursively, so the motion distance calculated each time will be smaller and smaller until it is 0, so the motion speed is constantly decaying, which will have the effect of smooth motion. In addition, because the motion distance is calculated by scaling down the scroll distance, when the scroll distance is larger, the calculated motion distance will be larger, and when the scroll distance is smaller, the calculated motion distance will be smaller, so it realizes an efficient motion.

[0069] (3) The motion effect in js is realized by the loop call of the function. The logic realized in step (2) only makes the element viewport move up once, so it is necessary to use if conditional statement to judge whether the motion function needs to be called again. Again, the scrollTop value of the html element is read by using the querySelector or documentElement of the document, and then it is judged whether the value is greater than zero. If the condition is true, it means that the element viewport has not moved to the top, and then the method of executing the requestAnimationFrame of the browser is added in the conditional statement, and the function toMove is passed in as a parameter. After that, the browser will automatically calculate the optimal execution interval of the motion function, and as long as the if condition is true, the motion function will be continuously called, thereby realizing the continuous upward scrolling effect. When the if condition is not true, that is, the scrollTop value of the html element is not greater than 0, it means that the element viewport has moved to the top, and at this time the call of the motion function is stopped, and thus the motion is completed.

[0070] 4. After the encapsulation of the toMove motion function is completed, the function is finally bound to the click event of the btn. The addEventListener method under the btn is called, the first parameter is passed in the string click, and the second parameter is passed in the motion function toMove. Thus, the whole implementation process is completed.

[0071] In some optional implementations of the embodiment, the first predetermined ratio is proportional to the first distance. The method of calculating the distance of each movement is to calculate by scaling 0.08 times the scrolling distance of the element. This value can also be changed to other values such as 0.1, 0.06, etc. Changing this value will have some influence on the total running time. In addition to calculating the distance of each movement by scaling the scrolling distance of the element, the scrolling distance can also be sorted from large to small according to a certain algorithm to realize the smooth motion of the deceleration. The technology used by the present application is more simple and efficient, and the code amount is reduced.

[0072] With reference to Figure 4 , another embodiment of a method of page viewport sliding according to the present disclosure is shown as flowchart 400. The method of page viewport sliding includes the following steps:

[0073] Step 401, obtaining a third distance between the scrolled page element and the bottom of the page.

[0074] In the embodiment, the execution subject of the method of page viewport sliding (for example Figure 1The terminal device shown) can obtain the third distance between the scrolled page element and the page bottom through the internal function of the browser or other APP displaying the page. The page element can be a scroll bar that can be scrolled, and the third distance between the scrolled page element and the page bottom can be obtained through the scrollBottom function.

[0075] In step 402, in response to detecting the user-triggered operation of jumping to the page bottom, a downward movement step is performed: the third distance is reduced by a second predetermined ratio to obtain a fourth distance.

[0076] In this embodiment, a button for returning to the page bottom can be set in the page. The user triggers the operation of returning to the page bottom by clicking the button. The button can be a button always floating on the page, or can be a button in other forms. In addition to the button for returning to the page bottom, some gesture operations can also be defined to represent returning to the page bottom, for example, pressing the page and sliding downward.

[0077] The third distance here represents the distance between the scrolled page element and the page bottom. The fourth distance represents the movement distance after the third distance is reduced by the second predetermined ratio, i.e., the distance of the page element moving each time the movement is performed. The "first distance", "second distance", "third distance", and "fourth distance" are only used to distinguish the purposes of the distances, and do not represent the lengths of the distances. After the element scroll distance scrollBottom value is obtained, it is reduced by a certain ratio, for example, by 0.08 times. Then, the movement distance can be obtained by multiplying scrollBottom by 0.08.

[0078] The second predetermined ratio can be the same as or different from the first predetermined ratio. The second predetermined ratio is proportional to the third distance. The method of calculating the movement distance each time is to calculate the element scroll distance by scaling 0.08 times. This value can also be changed to other values, such as 0.1, 0.06, etc. Changing this value will have some effect on the total running time. In addition to calculating the movement distance each time by scaling the element scroll distance, the scroll distance can also be sorted from large to small according to a certain algorithm to achieve smooth movement of the deceleration. The technology using the proportional calculation is simpler and more efficient, and reduces the code amount.

[0079] In step 403, the third distance is reduced by the fourth distance to calculate the second target position of the page element after movement.

[0080] In this embodiment, the third distance is the original position, the fourth distance is the movement distance, and the second target position of the page element after movement (the relative position to the page bottom) is obtained by reducing the third distance by the fourth distance. If the value obtained by reducing the third distance by the fourth distance is less than or equal to 0, it means that the next movement can reach the bottom, and the second target position is set to 0.

[0081] Step 404, triggering the page element to move down to the second target position, and obtaining the current distance between the page element after moving and the bottom of the page.

[0082] In the embodiment, the related function can be called to trigger the page element to move down to the second target position. For example, after the second target position is assigned to the scrollBottom attribute of the html element, the effect of moving down the element viewport is triggered once. The current distance between the page element after moving and the bottom of the page is obtained again, which is used to determine whether to continue to move down.

[0083] Step 405, if the current distance is 0, stopping the page element from moving down.

[0084] In the embodiment, if the current distance is 0, it means that the page element has reached the bottom and does not need to move down again.

[0085] Step 406, if the current distance is not 0, taking the current distance as a third distance to execute the step of moving down.

[0086] In the embodiment, if the current distance is not 0, the page element has not reached the bottom and needs to execute the step of moving down again. The step of moving down can be executed at a fixed time interval, for example, executed once every 17 ms.

[0087] In some optional implementation manners of the embodiment, the step of moving down is executed at a fixed time interval, including: obtaining the screen refresh frequency; and determining the time interval for executing the step of moving down according to the screen refresh frequency. In this way, the number of screen refreshes per second and the number of page element movements can be matched to achieve the best animation effect, and the user will not feel stuck due to visual frame loss.

[0088] During the process of moving down the page element, the user can at any time suspend the page scrolling, for example, when clicking the page or switching the page.

[0089] As can be seen from Figure 4 , compared with the embodiment corresponding to Figure 2 , the flow 400 of the method of page viewport sliding in the embodiment embodies the step of moving down the page viewport. Therefore, the scheme described in the embodiment can realize the process of quickly moving to the bottom. Similarly, the page viewport can also be moved left and right according to the above method. The visual effect can be improved.

[0090] In some optional implementations of the embodiment, the timing of the downward movement step is performed based on the requestAnimationFrame calculation of the browser to perform the time interval of the downward movement step. The use of the requestAnimationFrame method replaces the timer to perform the movement, which improves the smoothness and performance of the movement. The method achieves the movement through function loop calls, and does not need to manually set the running interval time. The browser automatically calculates the animation function execution interval to match the number of movements per second of the function with the number of screen refreshes of the browser to achieve the best animation effect. In addition, the requestAnimationFrame method also improves the performance of the browser. The movement based on the timer is throttled by the browser when the page is switched to the background, but the requestAnimationFrame is paused for execution to improve the performance of the browser by saving resource occupation.

[0091] Figure 5 A schematic diagram showing another application scenario of the method of page viewport sliding according to the present disclosure is shown. In the application scenario, Figure 5 , the user clicks the "back to bottom button" in the upper right corner of the mobile phone screen, and the scroll bar of the page moves downward by the fourth distance. The mobile phone calculates whether it has reached the bottom after the movement, and if not, it will continue to move downward at a regular time interval. The fourth distance of each movement is the result of the reduction of the distance before the movement.

[0092] Further referring to Figure 6 , as an implementation of the method shown in the above figures, the present disclosure provides an embodiment of a device for page viewport sliding. The device embodiment corresponds to the method embodiment shown in Figure 2 , and the device can be applied to various electronic devices.

[0093] As shown in Figure 6 , the device 600 for page viewport sliding of the embodiment includes a detection unit 601, a movement unit 602, and a timing unit 603. The detection unit 601 is configured to obtain a first distance between a scrolled page element and the top of the page. The movement unit 602 is configured to, in response to detecting a user-triggered operation of returning to the top of the page, perform an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; calculating a first target position of the page element after movement by subtracting the second distance from the first distance; triggering the page element to move upward to the first target position and obtaining a current distance between the page element after movement and the top of the page; and if the current distance is 0, stopping the upward movement of the page element. The timing unit 603 is configured to, if the current distance is not 0, perform the above-mentioned upward movement step with the current distance as the first distance.

[0094] In the embodiment, the specific processing of the detecting unit 601, the moving unit 602 and the timing unit 603 of the device 600 for page viewport sliding can refer to steps 201-206 in the corresponding embodiment. Figure 2

[0095] In some optional implementations of the embodiment, the timing unit 603 is further configured to: acquire a screen refresh frequency; and determine the time interval for performing the above-mentioned upward movement step according to the screen refresh frequency.

[0096] In some optional implementations of the embodiment, the timing unit 603 is further configured to: determine the time interval for performing the above-mentioned upward movement step based on a requestAnimationFrame of a browser.

[0097] In some optional implementations of the embodiment, the first predetermined ratio is proportional to the first distance.

[0098] In some optional implementations of the embodiment, the detecting unit 601 is further configured to acquire a third distance between the scrolled page element and the page bottom. The moving unit 602 is further configured to: in response to detecting a user-triggered operation of jumping to the page bottom, perform a downward movement step: reduce the third distance by a second predetermined ratio to obtain a fourth distance; calculate a second target position of the page element after movement by subtracting the fourth distance from the third distance; trigger the page element to move downward to the second target position, and acquire a current distance between the page element after movement and the page bottom; and if the current distance between the page element and the page bottom is 0, stop the page element from moving downward. The timing unit 603 is further configured to: if the current distance between the page element and the page bottom is not 0, take the current distance between the page element and the page bottom as a third distance to perform the above-mentioned downward movement step.

[0099] In some optional implementations of the embodiment, the timing unit 603 is further configured to: acquire a screen refresh frequency; and determine the time interval for performing the above-mentioned downward movement step according to the screen refresh frequency.

[0100] In some optional implementations of the embodiment, the timing unit 603 is further configured to: determine the time interval for performing the above-mentioned downward movement step based on a requestAnimationFrame of a browser.

[0101] In some optional implementations of the embodiment, the second predetermined ratio is proportional to the third distance.

[0102] ​According to embodiments of the present disclosure, the present disclosure also provides an electronic device, a readable storage medium.

[0103] Figure 7 A schematic block diagram of an example electronic device 700 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptops, desktops, tablets, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device can also represent various forms of mobile devices, such as personal digital assistants, cellular telephones, smartphones, wearable devices, and other similar computing devices. The components shown here, their connections and relationships, and their functions, are meant to be examples only, and are not meant to limit implementations of the present disclosure described and / or claimed in this document.

[0104] As Figure 7 shown, the device 700 includes a computing unit 701 that can perform various appropriate actions and processes according to a computer program stored in a read-only memory (ROM) 702 or a computer program loaded into a random access memory (RAM) 703 from a storage unit 708. Various programs and data required for the operation of the device 700 can also be stored in the RAM 703. The computing unit 701, the ROM 702, and the RAM 703 are connected to each other through a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.

[0105] Various components in the device 700 are connected to the I / O interface 705, including: an input unit 706, such as a keyboard, a mouse, etc.; an output unit 707, such as various types of displays, speakers, etc.; a storage unit 708, such as a magnetic disk, an optical disk, etc.; and a communication unit 709, such as a network card, a modem, a wireless communication transceiver, etc. The communication unit 709 allows the device 700 to exchange information / data with other devices through a computer network, such as the Internet, and / or various telecommunication networks.

[0106] The computing unit 701 can be various general and / or special purpose processing components with processing and computing capabilities. Some examples of the computing unit 701 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various specialized artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 701 performs various methods and processes described above, such as the method page viewport scrolling. For example, in some embodiments, the method page viewport scrolling can be implemented as a computer software program tangibly embodied in a machine-readable medium, such as the storage unit 708. In some embodiments, part or all of the computer program can be loaded and / or installed onto the device 700 via the ROM 702 and / or the communication unit 709. When the computer program is loaded onto the RAM 703 and executed by the computing unit 701, one or more steps of the method page viewport scrolling described above can be performed. Alternatively, in other embodiments, the computing unit 701 can be configured to perform the method page viewport scrolling by any other suitable means, such as by means of firmware.

[0107] Various implementations of the systems and techniques described above can be realized in digital electronic circuitry, integrated circuitry, a field programmable gate array (FPGA), an application specific integrated circuit (ASIC), a system on a chip (SOC), a programmable logic device (PLD), a computer hardware, firmware, software, and / or combinations thereof. These various implementations can include implementation in one or more computer programs that are executable and / or interpretable on a programmable system including at least one programmable processor, which can be special or general purpose, coupled to receive data and instructions from, and to transmit data and instructions to, a storage system, at least one input device, and at least one output device.

[0108] Program code for carrying out methods of the present disclosure can be written in any combination of one or more programming languages. The program code can be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the program code, when executed by the processor or controller, produces the functions / operations specified in the flowcharts and / or the block diagrams. The program code can be executed entirely on a machine, partially on a machine, partially on a machine as a stand-alone software package, partially on a machine and partially on a remote machine or entirely on a remote machine or server.

[0109] In the context of this disclosure, a machine-readable medium can be a tangible medium that contains or stores a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include but is not limited to an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of the machine-readable storage medium will include one or more lines of electrical connections, portable computer disks, hard disk drives, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or Flash memory), optical fibers, portable compact disc read-only memories (CD-ROMs), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing.

[0110] To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user and a keyboard and a pointing device (e.g., a mouse or a trackball) by which the user can provide input to the computer. Other kinds of devices can be used to provide for interaction with a user as well; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form, including acoustic, speech, or tactile input.

[0111] The systems and techniques described here can be implemented in a computing system that includes a back end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front end component (e.g., a user computer having a graphical user interface or a Web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back end, middleware, or front end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network (LAN), a wide area network (WAN), and the Internet.

[0112] The computer system can include clients and servers. This relationship can be. The servers are generally remote from the users and can be accessed via the Internet using a communication network. The relationship can be a client-server relationship over a communications network, and as such, the servers can be accessed by more than one client. The servers can be distributed across multiple computers or machines around the world. The servers can be combined into a single server or multiple servers. The servers can be virtual servers. The servers can be cloud servers. The servers can be intelligent cloud servers or intelligent cloud hosts with artificial intelligence technology. The servers can be servers of a distributed system, or servers combined with a blockchain. The servers can be cloud servers, or intelligent cloud servers or intelligent cloud hosts with artificial intelligence technology.

[0113] It should be understood that the various forms of flow shown above can be re-ordered, added to, or deleted from without departing from the scope of the present disclosure. For example, the steps recited in the present disclosure can be performed in parallel, in series, or in a different order, as long as the desired results of the technical solutions of the present disclosure are achieved, and the present disclosure is not limited herein.

[0114] The above detailed description does not constitute a limitation on the protection scope of the present disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent replacements, and improvements made within the spirit and principles of the present disclosure shall be included in the protection scope of the present disclosure.

Claims

1. A method for page viewport sliding, comprising: obtaining a first distance of a scrolled page element from a top of a page; in response to detecting a user triggered operation of returning to the top of the page, performing an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; calculating a first target position of the page element after movement by subtracting the second distance from the first distance; triggering the page element to move upward to the first target position, and obtaining a current distance of the page element from the top of the page after movement; if the current distance is 0, stopping the page element from moving upward, wherein the operation comprises clicking a button of returning to the top of the page or a gesture operation, and the first predetermined ratio is proportional to the first distance; if the current distance is not 0, performing the above-mentioned upward movement step with the current distance as the first distance.

2. The method of claim 1, wherein, The timing execution of the above-mentioned upward movement step comprises: obtaining a screen refresh frequency; determining a time interval for performing the above-mentioned upward movement step according to the screen refresh frequency.

3. The method of claim 1, wherein, The timing execution of the above-mentioned upward movement step comprises: calculating a time interval for performing the above-mentioned upward movement step based on a requestAnimationFrame of a browser.

4. The method of claim 1, wherein, The method further comprises: obtaining a third distance of the scrolled page element from a bottom of the page; in response to detecting a user triggered operation of jumping to the bottom of the page, performing a downward movement step: reducing the third distance by a second predetermined ratio to obtain a fourth distance; calculating a second target position of the page element after movement by subtracting the fourth distance from the third distance; triggering the page element to move downward to the second target position, and obtaining a current distance of the page element from the bottom of the page after movement; if the current distance of the page element from the bottom of the page is 0, stopping the page element from moving downward; if the current distance of the page element from the bottom of the page is not 0, performing the above-mentioned downward movement step with the current distance of the page element from the bottom of the page as the third distance.

5. The method of claim 4, wherein, The timing execution of the above-mentioned downward movement step comprises: obtaining a screen refresh frequency; determining a time interval for performing the above-mentioned downward movement step according to the screen refresh frequency.

6. The method of claim 4, wherein, The timing execution of the above-mentioned downward movement step comprises: calculating a time interval for performing the above-mentioned downward movement step based on a requestAnimationFrame of a browser. 7.An apparatus for page viewport sliding, comprising: a detecting unit configured to obtain a first distance of a scrolled page element from a top of a page; a moving unit configured to, in response to detecting a user-triggered operation of returning to the top of the page, perform an upward movement step: reducing the first distance by a first predetermined ratio to obtain a second distance; subtracting the second distance from the first distance to calculate a first target position of the page element after movement; triggering the page element to move upward to the first target position and obtaining a current distance of the page element after movement from the top of the page; and if the current distance is 0, stopping the page element from moving upward, wherein the operation includes clicking a button or a gesture operation of returning to the top of the page, and the first predetermined ratio is proportional to the first distance; a timing unit configured to, if the current distance is not 0, timing the current distance as a first distance to perform the above-mentioned upward movement step. 8.An electronic device for page viewport scrolling, comprising: one or more processors; a memory device having one or more programs stored thereon, when the one or more programs are executed by the one or more processors, the one or more processors implement the method of any of claims 1-6.

9. A computer readable medium having stored thereon a computer program, wherein, The program is executed by the processor to implement the method of any of claims 1-6.

Images