页面内跳转到相应位置的3种方法

首先设置所需的css和html

设置css

        .demo{
            width: 200px;
            height: 200px;
            border: 1px red solid;
            margin-bottom: 100px;
            margin-right: 50px;
        }
        .btn{
            position: fixed;
            right: 0;
            top: 20px;
            background-color: #0000cc;
            color: #ffffff;
        }

设置html

<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo" id="demo">这个DIV,id是demo</div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>
<div class="demo"></div>

重点来了

1.第一种方法直接在html中添加

<!--1.使用a标签跳转到对应id的位置-->
<a href="#demo">跳到id为demo的DIV</a>

  使用a标签跳转到相应id的位置

2.第二种方法先在html中添加

<!--2.通过btn的window.location.hash  跳转到对应位置-->
<input  type="button" value="跳到id为demo的DIV"  onclick="javascript:onTopClick();" />

  再添加js代码

    function onTopClick() {
        window.location.hash = "#domo";
    }

  由于btn没有herf跳转功能,这里我们用hash(锚链接)跳到当前页面的位置

3.第三种方法先在html中添加

<button class="btn"> 到指定滚动高度</button>

  再添加js代码

$(document).on(‘click‘,$(‘.btn‘),function(){
        $(window).scrollTop($(‘#demo‘).offset().top)
    })

  这里我是通过先得到id为demo的div距离文档顶部的距离,再使页面滚动到这个高度来达到目的。

原文地址:https://www.cnblogs.com/yefanhua/p/9224501.html

时间: 2024-11-05 20:49:29

页面内跳转到相应位置的3种方法的相关文章

JS实现页面内跳转

使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法: 1 var oneTop = $("#aa").offset().top; 2 jQuery("html", "body").animate({ scrollTop: oneTop }, 0); 经过测试,如果不需要有滑动动画的话,可使用下面的语

5(拓展)-页面内跳转

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>页面内跳转</title> </head> <body> <h1 id='biaoti01'>标题一</h1> <a href="#biaoti01">标题一</a> <a href="#b

Android 记录和恢复ListView滚动的位置的三种方法

本文主要介绍记录和恢复listView滚动位置的3种方法(1)记录listView滚动到的位置的坐标(推荐)(2)记录listView显示在屏幕上的第一个item的位置(3)通知适配器数据改变. 有时在view切换时,需要恢复listView之前滚动到的位置,鉴于网上已有资料说的都是第二种方法,而第二种方法本身在精确度上较差,自己找到了第一种方法分享下. 1.记录listView滚动到的位置的坐标,然后利用listView.scrollTo精确的进行恢复 listView.setOnScroll

页内跳转到指定位置-有过渡动画

一般页内跳转,像:锚点,scrollTo,location.hash正常情况下都是直接跳转的,没有动画,如果我们想要添加动画,就需要采取优化或其他办法.不多说,看下面. 今天用了三种方法,分别是scrollTo.自定义function和jQuery链式的方法,个人推荐第一种,因为非常简单,后续如果还有,会继续补充. window.scrollTo中可以配置过渡效果,它本身是瞬间跳转到某一位置(即behavior:'instant'),只需要在他的对象中配置behavior:'smooth'就可以

Activity的跳转及返回值 的四种方法

Activity生命周期 从创建到销毁的生命周期: onCreate()→onStart()→onResume()→onPouse()→onStop()→onDestroy() 从起动到后台再到前台: onCreate()→onStart()→onResume()→onPouse()→onStop()→onRestart()→onStart()→onResume() 启动第二个activity 1.创建new activity 2.创建对应的new xml布局文件 3.在new activity

使用JS实现页面内跳转的两种方式

第一种方式是直接使用锚点配合链接标签: <h2 id="h2-anchor">Scroll to here</h2> <a href="#h2-anchor">Jump to H2</a> 现在大多数实现都采用该种方式.但是这种方式没有动画效果,跳转是直接发生的. 第二种方式使用jQuery中的animate方法实现: var target= $('#h2-anchor').offset().top; $('body'

WebView支持特效,页面内跳转(转载!)

1 webView = (WebView) findViewById(R.id.lottery_webview); 2 webView.getSettings().setJavaScriptEnabled(true); 3 webView.getSettings().setLoadsImagesAutomatically(true);//auto load images 4 webView.getSettings().setSupportZoom(false); 5 webView.getSet

gitlab markdown支持页面内跳转

markdown语法: [to_be_link](#id_name) 标题: ## 2.aaa <a name="id_name"></a> 参考: http://stackoverflow.com/questions/3292903/in-markdown-what-is-the-best-way-to-link-to-a-fragment-of-a-page-i-e-some-id

锚点 页面内跳转

<a href="#huifutiezi">锚点<a>改成 <a name="huifutiezi">锚点<a>或者<a id="huifutiezi">锚点<a> <script>window.location.hash='#huifutiezi'</script>